Angular date picker using material

Angular date picker

using Angular material

In this tutorial we will create a date picker using angular material package in angular

We all might know about the angular material components , if not please checkout here 

it is helpfull to design a attractive  ui/ux  components for angular projects we will use mtdatepicker component from angular material

To create date picker.

After successful installation of the angular project

Follow the below steps

Step 1: install the material , Cdk, Animation package by entering the following command

ng add @angular/material @angular/animations @angular/cdk

You will be prompted to select a material theme

Yes/No

Now we need to import the material to our app.module.ts

//app.module.ts

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

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

import { AppRoutingModule } from './app-routing.module';

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

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

import { 

  MatDatepickerModule,

  MatNativeDateModule,

  MatInputModule

} from '@angular/material';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    MatNativeDateModule,

    MatInputModule,

    MatDatepickerModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step 3 : now we are ready with the angular material package and imported required components to our 

app.module.ts now we will create the html file

 <input matInput [matDatepicker]="picker" placeholder="Choose a date"> 

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>   <mat-datepicker #picker>

</mat-datepicker>

Date picker successfully integrated Now you can

 run the project by 

ng serve -o

Now you can see the following screen