Unable to set <ion-textarea> height

hi, i cant seem to be able to set a default height for ion-textarea.

passed values this way from page A

async popupSchedule(schedule){
const modal = await this.modalCtrl.create({
component: EditSchedulePage,
componentProps: {
‘description’: schedule.data().description,
‘date’: schedule.data().date,
return await modal.present();

and on another page i received input like this

@Input() title : string;
@Input() descrption : string;
@Input() date : string;

and in html

the concern is on the textarea…i expected it would expand based on the length of texts in it.

how can i make that possible?

try setting the rows property

above the text is partially covered

thanks for replying i tried this already [attr.rows]=10
it works only when i press enter. i need the rows set without having to press enter

You don’t set height , rather you set rows attribute:


hi , thanks alot it works but not until i removed auto-grow=“true”
and also is there a limit for number of rows?

If anyone needs to fix this, the problem still persists in ionic 5.

in order to let this work you have set autogrow to false, and add

ngAfterViewInit() {
this.textArea.autoGrow = true;

in your component.
this.textArea points to “@ViewChild(‘myTextArea’) private textArea: IonTextarea;” and you have a #myTextArea on your textarea element.


thank you so much for this fix. this is really a broken autogrow attribute!
hopefully they will fix that

One remark:
Dont put it in oninit - rather in ionviewdidenter
For my app I ran in a race condition with ngoninit.
With ionviewdidenter it was a good workaround for the broken autogrow feature

onInit and afterViewInit are not the same hook.

since you are not answering directly to me I am unsure if you are writing this in my direction.
if so:
I cannot follow. Pretty sure it is because of my minor knowledge about ionic/angular in comparison to yours, but I cannot make value out of your short remark. Care to elaborate. maybe?

Your advice is good, but I fear it’s misaimed, because @stplush was talking about ngAfterViewInit, while you’re warning not to use ngOnInit. Those are two different lifecycle events, and while you’re right that what @stplush wants to do can’t be done in ngOnInit, it can be done in ngAfterViewInit (because that’s when you’re guaranteed that properties decorated by @ViewChild have been resolved), and I would consider that the most logical place to do it.

1 Like

damn, so I somehow overlooked his hook. thank you, didnt realize that.
I honestly dont know where I took ngOnInit from… must have been jumping between posts.

Will give it a try with ngAfterViewInit() as well just to get more used to those hooks as well (never learned angular from scratch, I started with ionic and stuck to ionic hooks so far)