Elastic ion-textarea

Ionic Framework ionic-v3
3

Hey @Bastian,

Thank you for that code, it really helped me get started. I ended up writing this component:

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'elastic-textarea',
  inputs: ['placeholder', 'lineHeight'],
  template:
  `
  <ion-textarea #ionTxtArea
    placeholder='{{placeholder}}'
    [(ngModel)]="content"
    (ngModelChange)='onChange($event)'></ion-textarea>
  `,
  queries: {
    ionTxtArea: new ViewChild('ionTxtArea')
  }
})
export class ElasticTextarea {
  constructor() {
    this.content = "";
    this.lineHeight = "22px";
  }

  ngAfterViewInit(){
    this.txtArea = this.ionTxtArea._elementRef.nativeElement.children[0];
    this.txtArea.style.height = this.lineHeight + "px";
  }

  onChange(newValue){
    this.txtArea.style.height = this.lineHeight + "px";
    this.txtArea.style.height =  this.txtArea.scrollHeight + "px";
  }
}

I know that this.ionTxtArea._elementRef.nativeElement.children[0] looks pretty bad. If somebody has any other suggestions on how to get the <textarea> element that’s a child of the <ion-textarea>, please let me know.

USAGE:
I ended up using the component like this:

<ion-item>
    <ion-label style="margin:0px;"></ion-label>
    <div item-content style="width:100%;">
      <elastic-textarea placeholder="Type to compose" lineHeight="22"></elastic-textarea>
    </div>
 </ion-item>

To get the below look at the bottom of my chat page:

image
ionic-chat-input.png367×647 32.9 KB

But it’s also usable on its own:

<elastic-textarea placeholder="Type to compose" lineHeight="22"></elastic-textarea>

I hope this helps somebody until a better solution is created.

3 Likes