Angular 13 material datepicker; In this tutorial, i am going to show you how to create and use datepicker using the material library in angular 13 apps.
Angular 13 Material Datepicker Tutorial
Use the below given steps to create and use datepicker using material in the angular 13 apps:
- Step 1 – Create New Angular App
- Step 2 – Install Ng Material
- Step 3 – Import Form Module
- Step 4 – Create Material DatePicker HTML in View File
- Step 5 – Start Angular App
Step 1 – Create New Angular App
Run the following command on terminal to install angular app:
ng new my-new-app
Step 2 – Install Ng Material
Run the following command on terminal to install ng material into your angular 13 apps:
ng add @angular/material
And will see on cmd; as follows:
Installing packages for tooling via npm. Installed packages for tooling via npm. ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] ? Set up HammerJS for gesture recognition? Yes ? Set up browser animations for Angular Material? Yes
And 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">
Visit to styles.css file and add the following code.
@import "[email protected]/material/prebuilt-themes/indigo-pink.css";
Step 3 – Import Module
Go to src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:
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 – Create Material DatePicker HTML in View File
Go to src/app directory and open app.component.html file. Then update the following code into it to creating datepicker in angular apps; as follows:
<h1>Angular 13 Material Datepicker Example - Laratutorials.Com</h1> <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>
Note that:- In the above form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:
Step 5 – Start Angular App
In this step, execute the following command on the terminal to start the angular app:
ng serve
Open browser, enter the below url:
http://localhost:4200
Conclusion
Angular 13 material datepicker; In this tutorial, You have learned how to create and use datepicker using the material library in angular 13 apps.
Be First to Comment