I’ve been working on a project recently which has a form with an ion-textarea inside that contains long text. A problem with ion-textarea for me was that it shows only two lines of text and users have to scroll through the text to change it.
So, I decided to create a directive which would resize the height of ion-textarea base on its contents.
The main requirement for the directive was that it should be a simple attribute directive. In other words, it shouldn’t be a wrapper on ion-textarea, so it’s possible to use the API of ion-textarea.
Here is how it looks - ion-textarea is resized initially to fit its text.
There is also a Plunker demo.
Note: for some reason vertical scrollbar appears on ion-textarea in Plunker, which doesn’t happen when testing in a browser or in a device though.
<ion-textarea elasticTextArea [(ngModel)]="description"></ion-textarea>