This post is trending. 5,841 Views

Elastic text area component in Ionic Framework

If you have used facebook you have seen the elastic text input element. When you create a facebook post , the more you write the input area automatically adjusts it’s size to fit the content. In this tutorial we are going to implement similar feature in our ionic app.

In this tutorial we will learn

  1. Create a blank ionic application using Ionic CLI
  2. Create a directive using Ionic CLI and implementing the function to autosize textarea
  3. Apply directive to

Basics of Ionic

If you are new to Ionic, please first visit this getting started with ionic tutorial before continuing with this tutorial.

Create a blank application

In your terminal, cd to your working directory and type the following command
ionic start AutosizeTextarea blank --v2
This will create a new Ionic 2 project (now Ionic 3) with the official blank starter template. To verify that everything is working correctly, serve and view the output in your browser. If you don’t know how please go through this getting started with ionic tutorial.

Create and implement directive

In your terminal, cd into your project directory and create an new directive using the following command
ionic g directive autosize
This creates ‘src/components/autosize/autosize.ts’ file. Open this file in your favourite text editor and replace it’s content with the following code

import {ElementRef, HostListener, Directive, OnInit} from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class Autosize implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

  adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
  }
}

Here, the main work is done in the adjust() function. This set’s the textarea.style.height to textarea.scrollHeight, where the scroll height gives the overall height of the textarea required to view all the contents. Hence this adjust() function autosizes the textarea to it’s content size.
Also, we are using @HostListener to listen to input event, and calling adjust() function every time input event is tiggred, i.e. the input even is emitted on the host.
Finally, we are calling adjust() function on ngOnInit() to adjust the height to content initially present on the textarea

Apply directive to textarea

Before applying this directive to textarea and for it to work, it has to be imported in ‘src/app/app.module.ts’ and declared. So, open ‘src/app/app.module.ts’ and paste the following line below other import statements.
import { Autosize} from '../components/autosize/autosize';
And add Autosize to declarations array.

Now, open ‘src/pages/home/home.html’ and paste the following code.

<ion-header>
   <ion-navbar>
     <ion-title>
       Autosize Textarea
     </ion-title>
   </ion-navbar>
</ion-header>

<ion-content padding>
   <ion-item>
       <ion-textarea autosize></ion-textarea>
   </ion-item>
</ion-content>

Finally, serve the app in browser using ionic serve and see the magic happen. Keep typing in the textarea or paste some large contents, the text area will automatically adjust it’s size according to its contents.

Related Posts

This post is trending.

Build Responsive App with Ionic Responsive Grid

Up until now, Ionic Framework mostly focused on mobile screens. There were no in built support for targetting larger screens like tablets. […]

%d bloggers like this: