How To Use Material Input Date In Angular App

This blog will give you an example of angular material date input mask. you’ll learn angular material input mask date. I’m going to show you about angular material date input. let’s discuss the date input mask angular material. you can easily add date input mast in the angular app.

In this example, we will add a material design theme and then import some dependency modules of input. then we will simply install the ngx-mask package for the date mask.

So, let’s see bellow example from here:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myInputDatepicker

Step 2: Add Material Design

Now in this step, we need to just install the material design theme in our angular application. so let’s add as like bellow:

npm install @angular/material@10.1.0

ng add @angular/material

Step 3: Install ngx-mask

npm install --save ngx-mask

Step 4: Import-Module

In the third step, we need to import some dependencies like MatInputModule, NgxMaskModule. so let’s add.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
     
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
  
import { NgxMaskModule, IConfig } from 'ngx-mask'
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    NgxMaskModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Update HTML file

Now in the view file, we will write code of input element with date picker as like bellow:

<div style="margin: 10rem;">
  <h1> Angular material date input mask - thecodehubs.com</h1>
  <mat-form-field class="example-full-width"> <mat-label>Date</mat-label> 
    <input matInput mask="d0/M0/0000" placeholder="Ex. 28/05/2021" value=""> 
  </mat-form-field>
</div>

Now we are ready to run our example, you can run by the following command:

ng -o serve

OUTPUT: