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.
Summary
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.
Code
TextArea.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
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 () {
event.target.style.height = "10px";
event.target.style.height = (event.target.scrollHeight + 25) + "px";
}, 0);
}
}
autoGrowTextZone(e) {
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25)+"px";
}Conclusion
Using above we can easily have a autoexpanding textares
No comments :
Post a Comment
Please leave your message queries or suggetions.