Unable to set <ion-textarea> height

Ionic Framework
1

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: {
‘title’:schedule.data().title,
‘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?

2

try setting the rows property

3

Capture
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

4

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

rows=“15”

5

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

7

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.ionChange.subscribe(()=>{
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.

8

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

9

onInit and afterViewInit are not the same hook.

10

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?

11

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.

12

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)