Angular Material 16 Datepicker Example Tutorial
Angular Material is a ui library which offers plenty of ui components to build modern user-centric interfaces.
Angular Material Datepicker service works with <mat-datepicker>
directive. It allows users to select a date from the angular material calendar.
To get the dates working with in an Angular project, we need to import MatDatepickerModule
API.
A datepicker is a combination of text input and a calendar pop-up generated via matDatepicker
property.
In this tutorial, we will teach you how to configure the required dependency to implement datepicker control in an Angular project.
Angular Material 16 Datepicker Example
Firstly, We’ll set up a basic Angular project using latest Angular CLI. After that, we’ll install the material library and create a separate Angular Material Modules file.
Here we can import other user interface components of Angular material in future.
Table of Contents
Setup Angular project
To setup Angular project for Angular material datepicker demo run the following command.
ng new angular-material-datpicker
Answer the questions:
# ? Would you like to add Angular routing? = No
# ? Which stylesheet format would you like to use? = SCSS
Head over to the Angular project directory.
cd angular-material-datpicker
Remove Angular TypeScript Errors
To get rid from the errors:
Property ‘xxxName’ comes from an index signature, so it must be accessed with [‘xxxName’]
This setting makes sure profound consistency between accessing a field via the “dot” (obj.key)
syntax, and “indexed” (obj["key"])
and the way which the property is declared in the type.
Without this flag, TypeScript will allow you to use the dot syntax to access fields which are not defined:
Make sure to set following properties to false in tsconfig.json file:
"compilerOptions": {
...
...
"strict": false,
"noPropertyAccessFromIndexSignature": false,
...
...
},
"angularCompilerOptions": {
"strictTemplates": false
}
Install Angular Material library
To set up material library, enter the following command.
ng add @angular/material
Select the Angular material theme from the given options:
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
Choose Yes for incorporating Angular Material Typography and Animations packages.
# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes
To import the angular material theme, include the given below code to your src/index.html file.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Go to styles.scss file and add the following code.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
To check out the Angular material documentation please visit here.
Create Specific Angular Material Module File
In this part of the tutorial, we’ll create a specific angular material module file.
As we know Angular material offers wide range of ui components so that we can import the angular material ui components in this file for easy manageability.
Go to angular-material.module.ts file and include the following code. This file will be imported in main App Module file.
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
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';
const materialModules = [
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule
];
@NgModule({
imports: [
CommonModule,
...materialModules
],
exports: [
...materialModules
],
})
export class AngularMaterialModule { }
Now, go to app.module.ts file and import the AngularMaterialModule
.
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [],
imports: [
AngularMaterialModule,
],
providers: [],
bootstrap: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Adding Angular Material Datepicker
In next step we’ll add an input field which will show datepicker in frontend.
Understand Angular Datepicker input field
Angular material datepicker is a combination of text input and calendar popup.
<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>
To toggle on Angular calendar icon, we use datepicker toggle button as mentioned in the example below.
<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>
The <mat-form-field>
tag is a wrapper for input fields in an angular material form.
<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>
Initialize Angular Material Calendar View
Initializing calendar view in Angular Material is not very difficult job.
We can use the startView property of <mat-datepicker>
date field. The calendar view can be set to month, year, or multi-year.
Go to app.component.html
file and add the following code.
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
Go to app.component.ts file and add the following code.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
startDate = new Date(2000, 0, 2);
}
Start Application
Finally, we’ve setup angular material ui library in angular app. Enter the below command in your terminal and hit enter to run the project.
ng serve --open
Finally, we’ve completed Angular Material Date-picker tutorial with examples.