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.