Angular Material Datepicker Example

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this post i will show you how to use angular material datepicker and you can easily implement angular material datepicker in your angular project. Datepicker is very common in every project mostly used in registration form to enter DOB.

Let's see how we can implement the angular material datepicker.

 

STEP 1 - Create new angular project

If @angular/cli is not installed in your system then first install angular/cli .Open the command prompt or terminal and run the below command to install @angular/cli 

npm install -g @angular/cli

Open the command prompt or terminal and run the below command , this command will create new angular project

ng new DatepickerApp

 

STEP 2 - Install the Angular Material Package

Open the DatepickerApp and install the Angular Material package by running below command

ng add @angular/material

 

STEP 3 - Install the Angular Material Package

Import few material modules in the app.module file

  • MatDatepickerModule
  • MatNativeDateModule
  • MatFormFieldModule
  • MatInputModule
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 {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

STEP 4 - Add the datepicker in the view

Now we are almost done , in this last step we are going to add the datepicker code in the html view , in this example i have used app.component.html but you can use any component html file.

 src/app/app.component.html
<form action="" style="margin: auto; width: 50%;">
    <h2>Code Learning Point Datepicker Example</h2>

    <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

</form>

 Now you are ready just run the local server , run the below command to start the server

ng serve

Open this URL http://localhost:4200/

Angular Material Datepicker

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

Related Posts

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...

Card image cap

Custom Pipe In Angular

Angular12 17-07-2021 Saheb Sutradhar

In this post you will learn how to create custom pipe in angular. When you need some data formatting which can not be done by using angular built-in pipes then ...