Angular Expanding Textarea

March 12, 2020 | No comments

Table of Content

Autosize textarea in angular 9

Textarea is has attributes, rows and cols. We can set those to get attribute to get a textarea with desired width and height. But sometimes we need textarea with dynamic height. Following section demonstrates how we can do the same.


Following Angular Component show how we can achieve the same behaviour for the textarea. So that when we type if we need to extend the height of the textarea it will be done automatically.


import { Component, OnInit } from '@angular/core';
  selector: 'blog-post',
  template: '<div class="container-fluid">'
    + '<div class="row col-sm-10">'
    + '<textarea id="pageSummary" (keyup)="autosize($event)" rows=2 cols="60">'
    + '</textarea>'
    + '</div>'
    + '</div>'

export class TextAreaAutoSizeComponent implements OnInit {

  ngOnInit(): void {

  public autosize(event) {
    setTimeout(function () { = "10px"; = ( + 25) + "px";
    }, 0);


autoGrowTextZone(e) { = "0px"; = ( + 25)+"px";


Using above we can easily have a autoexpanding textares

No comments :

Post a Comment

Please leave your message queries or suggetions.