Hello Devs, 

In this tutorial, we will learn Angular 9 Material Textarea Tutorial | Angular Mat Textarea

In this section, we will create material input textarea in angular 6, angular 7, angular 8 and angular 9.

Follow this step by step guide below. 



Create New App


ng new app-material


Add Material Design


ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes



Example 1: Basic Material Textarea


src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

  

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  

import {MatInputModule} from '@angular/material/input';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatInputModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


src/app/app.component.html

<h4>Angular Material Textarea Example</h4>

<mat-form-field class="example-full-width">

    <mat-label>Enter Note:</mat-label>

    <textarea matInput placeholder="Ex. this is example..."></textarea>

</mat-form-field>


Example 2: Material Input Box with Reactive Form


src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

  

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {MatButtonModule} from '@angular/material/button';

import {MatInputModule} from '@angular/material/input';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    ReactiveFormsModule,

    MatButtonModule,

    MatInputModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



src/app/app.component.html

<h1>Angular Material Textarea Example - rathorji.in</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

  <mat-form-field class="example-full-width">

      <mat-label>Enter Note:</mat-label>

      <textarea matInput placeholder="Ex. this is example..." formControlName="note"></textarea>

 

      <mat-error *ngIf="form.get('note').hasError('required')">

          Email is <strong>required</strong>

      </mat-error>

  </mat-form-field>

  

  <button mat-raised-button color="accent">Submit</button>

</form>



src/app/app.component.ts

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

  

import { FormBuilder, FormGroup, Validators} from '@angular/forms';

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app-material2';

  

  form: FormGroup = new FormGroup({});

  

  constructor(private fb: FormBuilder) {

  

    this.form = fb.group({

      note: ['', [Validators.required]],

    })

  }

    

  get f(){

    return this.form.controls;

  }

    

  submit(){

    console.log(this.form.value);

  }

}


May this example help you.