How To Add Action Button In Angular 15 Material Datepicker

Websolutionstuff | Jul-07-2023 | Categories : Angular

In this tutorial, I will guide you through the process of adding an action button to the Angular 15 Material datepicker component. As a developer, I understand the need for customizing and extending the functionality of UI components to meet specific requirements.

By adding an action button to the datepicker, we can provide users with additional options and trigger specific actions when a date is selected. With the powerful combination of Angular 15 and Angular Material, we can easily enhance the datepicker component and create a more interactive and user-friendly experience.

In this tutorial, I will provide detailed explanations, code examples, and step-by-step instructions to help you add an action button to the Angular 15 Material datepicker component.

We will cover the prerequisites, installation of Angular Material, module imports, component creation, adding the action button, and handling the button click event.

Table of Contents:

  1. Prerequisites
  2. Install Angular Material
  3. Import Angular Material Modules
  4. Create Datepicker Component
  5. Add Action Button
  6. Run Angular 15 Application
  7. Conclusion

By the end of this tutorial, you will have a clear understanding of how to customize the datepicker by incorporating an action button, empowering you to create more dynamic and interactive date selection experiences in your Angular 15 Material application.

So, let's dive into the implementation steps and unlock the potential of enhancing the Angular 15 Material datepicker with an action button.

Step 1: Prerequisites

Before we get started, make sure you have a working Angular 15 application set up on your machine. Additionally, ensure that you have the necessary dependencies installed, including Angular Material and its corresponding CSS styles.


Step 2: Install Angular Material

To add Angular Material to your project, run the following command in your terminal.

npm install @angular/material@15 @angular/cdk@15


Step 3: Import Angular Material Modules

In the component file (app.module.ts), import the required Angular Material modules.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
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';
import { MatButtonModule } from '@angular/material/button'

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }



Step 4: Create Datepicker Component

Create a new component that will contain your datepicker. For example, you can create a DatepickerComponent using the Angular CLI.

ng generate component Datepicker


Step 5: Add Action Button

In your DatepickerComponent template file, add the action button inside the datepicker component.


<div class="container" style="margin:70px;">
	<h2>How To Add Action Button In Angular 15 Material Datepicker - Websolutionstuff</h2>
	<mat-form-field appearance="fill" class="example-form-field">
		<mat-label>Choose a date</mat-label>
		<input matInput [matDatepicker]="datepicker">
		<mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
		<mat-datepicker #datepicker>
			<button mat-button matDatepickerCancel>Cancel</button>
			<button mat-raised-button color="primary" matDatepickerApply>Apply</button>


.example-form-field {
    margin-right: 20px;


Step 6: Run Angular 15 Application

Start the Angular development server using the ng serve command and open the app in your browser.

ng serve




Step 7: Conclusion

By following this step-by-step guide, you have learned how to add an action button to the Angular 15 Material datepicker component. The action button provides additional functionality and allows you to trigger actions or perform specific tasks when a date is selected.


You might also like:

Recommended Post
Featured Post
Laravel 9 Phone Number Validation Using Regex
Laravel 9 Phone Number Validat...

In this article, we will see laravel 9 phone number validation using regex. In laravel 9 we will see different meth...

Read More


How to Send Bulk Mail Using Queue in Laravel 9
How to Send Bulk Mail Using Qu...

In this article, we will see how to send bulk mail using queue in laravel 9. Laravel queue is used for sending bulk...

Read More


PHP 8.3: Release Date and New Features
PHP 8.3: Release Date and New...

In this article, we will see PHP 8.3 release date and upcoming new features. PHP is a popular general-purpose scrip...

Read More


How To Get Current Week Records In MySQL
How To Get Current Week Record...

In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...

Read More