Ngx-month-menu NPM

ngx-month-menu dropdown

This is an Angular library that allows users to select a year and month combination from a dropdown menu. It displays options for the current year, the last four months, and the last four years, along with a list of months from January to December.

Demo

https://stackblitz.com/edit/angular-ivy-cqkjx4

Prerequisites
Installation
Usage
Customization
License
Author

Prerequisites

Before you begin, ensure you have met the following requirements:

Angular 12
Angular Material 12
material-design-icons-iconfont

Installation

npm i ngx-month-menu
npm i material-design-icons-iconfont@6.7

Import the library:

@NgModule({
     declarations: [
         ...
     ],
     imports: [
         ...
         NgxMonthMenuModule   
     ];
});

Usage

When you run your Angular application, the ngx-month-menu will display a dropdown menu in your template.
The dropdown menu will contain options for the current year, the last four months, and the last four years, along with the months from January to December.
When a user selects a year and month, the (selectedYearMonth) event will be emitted with the selected item in the format year=2020&month=4.
You can handle this event by implementing the onSelectYearMonth function in your component and extracting the selected year and month for further processing.
In Template

<ngx-month-menu (selectedYearMonth)="onSelectYearMonth($event)">
</ngx-month-menu>

In Component

onSelectYearMonth(selectedItem: string): void {
  // Parse the selected item and do something with it
  const [year, month] = selectedItem.split('&').map(param => param.split('=')[1]);
  console.log(`Selected Year: ${year}, Selected Month: ${month}`);
  // Add your custom logic here
}

Output

Selected Year: 2023, Selected Month: 9

Customization

You can customize the appearance and behavior of the ngx-month-menu by modifying its HTML template, styles, and Angular code to suit your project's needs.