Angular Textarea : Material design and Bootstrap

In this tutorial, we’ll learn how to use Angular Textarea input, Angular doesn’t have textarea component. To use Angular material textarea, we can use matInput directive, this directive allows native <input> and <textarea> elements to work with <mat-form-field>.

Input text type allows us to have only one line of text. If we need a multi-line text input for a substantial amount of text, use <textarea> input element instead.

In this tutorial, we’ll learn how to use Angular textarea input with material design and bootstrap CSS class. Will also demonstrate textarea with validation. Let get started.

 Here is the syntax of HTML Textarea input.

<textarea role="textbox" rows="10"></textarea>

Setting up and configuring Angular material textarea

Let’s first demonstrate the Angular material Textarea example here we had listed the abstract step of adding the Angular material checkbox.

• Step 1: Create Angular material textarea project
• Step 2: Add Angular material library to our Angular project.
• Step 3: Import MatFormFieldModule, MatInputModule FormsModule, and ReactiveFormsModule to our project.
• Step 4: Defining form if we used reactive form.
• Step 5: Add mat-form-field, mat-label, and textarea input in the component template

Step 1 to 3 : Setup and configure Angular textarea project using material UI

Let first create an Angular material textarea example project, we need to install the angular material library. We have a complete tutorial on the best approach to adding material in Angular.

ng new textareapp
cd new textareaApp
ng add @angular/material

To use the Angular material radio we need to import MatFormFieldModule, MatInputModule, FormsModule, and ReactiveFormModule in the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We have also imported a few material modules in our Angular project, to demonstrate the Angular textarea with a reactive form with other fields.

Step 4 to 5 Angular textarea ngmodel

To understand how to use the Angular material textarea example, let’s demonstrate an example of it in Angular template form. Here is a screenshot of the Angular Textarea ngmodel example.

We have two examples of Angular material textarea, first with label float and the second example without label floating and you can see in our gif image.

<section>
  <mat-form-field>
    <mat-label>Textarea: For Address</mat-label>
    <textarea [(ngModel)]="address" matInput rows="5" placeholder="Enter address">
    </textarea>
  </mat-form-field>
  <div>Address : {{ address }}</div>

  <mat-form-field floatLabel="never">
    <mat-label>Textarea label not float</mat-label>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>
</section>

Angular textarea example with reative form validation

In this example, we’ll demonstrate Angular material Textarea validation in template form. Here we have a screenshot of the Angular Textarea validation example.

When Textarea input is touched and not type any character then it will show red color on label and textarea. Indicating Textarea input is invalid.

<section>
  <form class="example-container" #options="ngForm">
    <mat-form-field>
      <mat-select [(ngModel)]="input" placeholder="Color" name="color" required>
        <mat-option value="primary">Primary</mat-option>
        <mat-option value="accent">Accent</mat-option>
        <mat-option value="warn">Warn</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="input-field">
      <input name="id" [(ngModel)]="uniqueId" type="text" matInput 
       placeholder="Unique ID" required>
    </mat-form-field>


    <mat-form-field class="input-field">
      <textarea matInput name="questionText" cols="100" rows="5" 
        placeholder="Question Text" [(ngModel)]="questionText"
        required></textarea>
    </mat-form-field>

    <button mat-raised-button color="primary" (click)="clear()">Clear</button>
    <button mat-raised-button color="primary" [disabled]="!options.valid" type="submit"> Save </button>
  </form>
</section>

In textarea we have rows and cols attribute to define how many rows and columns for textarea input. We need to define ngModel input field in our component typescript file as below.

  input = '';
  questionText = '';
  uniqueId = '';

Angular textarea example using bootstrap UI

Angular bootstrap Textarea is the same as HTML Textarea, except bootstrap adds some CSS style on textarea. Here is a screenshot of an example.

To use Bootstrap UI in our angular project, we need to install ng-bootstrap in our project by running the following command below.

ng add @ng-bootstrap/ng-bootstrap

<section>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="2" cols="10">
    </textarea>
  </div>
</section>

Conclusion
We learned how to use Angular Textarea input. We can choose Angular material directive matInput, bootstrap CSS class, or any other UI libraries.

Related Articles

• How to install Angular material ?
• Angular material checkbox: color, label direction
• How to implement Angular checkbox input in Angular 12 ?
• How to implement Angular Radio button ?