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.

Templates

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.

Step 2

Open this project in Visual Studio Code and install the following command “ng add @angular/material”

Step 3

Now select the library styles you needed the color in your appliaction

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:

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

import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
AppComponent
} from './app.component';
import {
AppComponent
} from './app.component';
import {
BrowserAnimationsModule
} from '@angular/platform-browser/animations';
import {
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule
} from '@angular/material';
import {
MatInputModule
} from '@angular/material';
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})],
bootstrap: [AppComponent]
})
export class AppModule {}

Providers

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.

Bootstrap

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.

Matdatepicker

Datepicker allows users choosing a date from the calendarserveralcomponents and directives that work together.

Matnativedate

Used by screen readers.

Matformfield

It is used for material components and text field styles such the underline ,floating ,label .

Matinput

Matinput is a directive that allows the <input> and <textarea> elements

Step 6

Html page ,add the matdatepicker in the given below code.

<mat-form-field>
<input matInput autocomplete="off" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</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

Summary

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