Angular Material DatePicker

Features Of Angular 

High performance
It gives high performance -- you can get 10x performance.
Single language for both platforms
You can build native mobile apps with strategies using Ionic Framework, NativeScript, and React Native.
Code splitting
Angular apps load quickly with the new Component Router, which delivers automatic code-splitting, so users only load code required to render the view they request.
Angular CLI - Command line tools
You can easily and quickly start building components, adding components, testing them, and then, instantly deploy them using Angular CLI.

Quickly create UI views with simple and powerful template syntax.

Angular Libraries

Angular gives us a collection of JavaScript modules (library modules) which provide various functionalities. 
Each Angular library has @angular prefix, like @angular/core,@angular/compiler, @angular/compiler-cli, @angular/http, @angular/router.
You can install them using the npm package manager and import parts of them with JavaScript import statements.
import { Component } from '@angular/core';
In the above example, Angular’s Component decorator is imported from the @angular/core library.

Introduction Angular Material

Angular Material is a UI component library and it is reusable for web design principles like browser portability, device independence, and graceful degradation.
Step 1 - Create an Angular Project
The command to create a new Angular project “ng new <NewApp>”. Let's create an Angular project using the following commands.
Angular Material DatePicker
Step 2
Open this project in Visual Studio Code and install the following command “ng add @angular/material”
Angular Material DatePicker 
Step 3
Now select the library styles you needed the color in your appliaction 
Angular Material DatePicker
Step 4 - Whats is HammerJS?
HammerJs is a popular library that helps you add support for touch gestures (Ex. Swipe,Pan,Zoom,Rotate) to your page.
There are two ways to set up the HammerJs.
Set up the hammerJs with the following command just press the Yes or No key:
Angular Material DatePicker
If you want an alternative automatic way just you can type the following code:
npm i hammerjs --save 
Step 5
Add the following code in the app.module.ts
  1. import {  
  2.     BrowserModule  
  3. } from '@angular/platform-browser';  
  4. import {  
  5.     NgModule  
  6. } from '@angular/core';  
  7. import {  
  8.     AppComponent  
  9. } from './app.component';  
  10. import {  
  11.     AppComponent  
  12. } from './app.component';  
  13. import {  
  14.     BrowserAnimationsModule  
  15. } from '@angular/platform-browser/animations';  
  16. import {  
  17.     MatDatepickerModule,  
  18.     MatFormFieldModule,  
  19.     MatNativeDateModule  
  20. } from '@angular/material';  
  21. import {  
  22.     MatInputModule  
  23. } from '@angular/material';  
  24. declarations: [  
  25.         AppComponent  
  26.     ],  
  27.     imports: [  
  28.         BrowserModule,  
  29.         BrowserAnimationsModule,  
  30.         MatDatepickerModule,  
  31.         MatNativeDateModule,  
  32.         MatFormFieldModule,  
  33.         MatInputModule  
  34.     ],  
  35.     providers: [],  
  36.     bootstrap: [AppComponent]  
  37. })],  
  38. bootstrap: [AppComponent]  
  39. })  
  40. export class AppModule {}  
Services that are present in one of the modules which is to be used in the other modules or components. Once a service is included in the providers it becomes accessible in all parts of that application.
The root component which is the main view of the application. This root module only has this property and it indicates the component that is to be bootstrapped.
Datepicker allows users choosing a date from the calendarserveralcomponents and directives that work together.
Used by screen readers.
It is used for material components and text field styles such the underline ,floating ,label .
Matinput is a directive that allows the <input> and <textarea> elements
Angular Material DatePicker
Step 6
Html page ,add the matdatepicker in the given below code. 
  1. <mat-form-field>  
  2.    <input matInput autocomplete="off" [matDatepicker]="picker" placeholder="Choose a date">  
  3.    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>  
  4.    <mat-datepicker #picker></mat-datepicker>  
  5. </mat-form-field>  
Execute demo
To see the output in the browser we will use the following command:
ng serve --open
This command will launch the application in your default browser
Angular Material DatePicker


In this article, we learned how we add materialdatepicker. Also, we discussed the basic concept of HammeJs in Angular application.