Hello Devs, 

In this tutorial, we will learn Angular 9 Material Text Box Example | mat-input in Angular

In this section, we will create material input box 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 Input Box

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 Input Box Example</h4>

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

    <mat-label>Name</mat-label>

    <input matInput placeholder="Ex. Hardik" value="Hardik">

</mat-form-field>

  

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

    <mat-label>Email</mat-label>

    <input matInput placeholder="Ex. ex@example.com">

</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 {MatInputModule} from '@angular/material/input';

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

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    ReactiveFormsModule,

    MatInputModule,

    MatButtonModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



src/app/app.component.html

<h1>Angular Material Input Box Example - rathorji.in</h1>

  

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

  

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

      <mat-label>Name</mat-label>

      <input matInput placeholder="Ex. Hardik" formControlName="name">

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

        Name Field is required

      </mat-error>

  </mat-form-field>

   

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

      <mat-label>Email</mat-label>

      <input matInput placeholder="Ex. ex@example.com" formControlName="email">

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

        Email Field is required

      </mat-error>

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

        Must be enter valid email

      </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({

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

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

    })

  }

    

  get f(){

    return this.form.controls;

  }

   

  submit(){

    console.log(this.form.value);

  }

}



 run by following command:

ng serve


May this example help you.