Angular 10 Textarea Auto Size

In this tutorial, we’ll learn how to auto size a pre element in our Angular 10 app.

As a prerequisite, you need to have Angular CLI v10 installed on your development machine.

You can also use the online Stackblitz IDE if you don’t have a development environment ready yet.

Step 1 — Initializing a New Angular 10 Project

Let’s get started with a brand new project. Head over to a new command-line interface and run the following command to create a new project:

$ ng new Angular10TextareaAutosize 

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Next, go to you project’s folder and run the server using the following commands:

$ cd Angular10TextareaAutosize$ ng serve    

Use your web browser and visit the http://localhost:4200/ address to see your app running.

Open your web browser and navigate to the http://localhost:4200/ address to see your app running.

Step 1 — Installing @onlinecode/ngx-pre-autosize

Next, open a new command-line interface and navigate to your project’s folder then run the following command to install the @onlinecode/ngx-pre-autosize library from npm using the following command:

$ npm install @onlinecode/ngx-pre-autosize

Next, open the src/app/app.module.ts file and add AutosizeModule in the imports array as follows:

import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{AutosizeModule}from'@onlinecode/ngx-pre-autosize';import{AppComponent}from'./app.component';@NgModule({imports:[BrowserModule,AutosizeModule],declarations:[AppComponent],bootstrap:[AppComponent]})exportclassAppModule{}

Next, open the src/app/app.component.html file and update it as follows:

<preautosize>    This is an example of @onlinecode/ngx-pre-autosize in Angular 10.</pre>

We simply add the autosize directive to the pre element which will enable it to auto-grow in height as you type to fit the content.