@felixdulfer/ngx-mat-period-picker

Material Period Picker for Angular

A modern Angular Material period picker component built with standalone components.

📦 Installation

npm install @felixdulfer/ngx-mat-period-picker

🚀 Quick Start

import { PeriodPickerComponent } from "@felixdulfer/ngx-mat-period-picker";

@Component({
  selector: "app-my-component",
  standalone: true,
  imports: [PeriodPickerComponent],
  template: `<ngx-mat-period-picker />`,
})
export class MyComponent {}

This project was generated using Angular CLI version 19.2.15.

Development server

To start a local development server, make sure you have a build of the lib:

npx -p @angular/cli@20 ng build ngx-mat-period-picker --watch

To run the demo app, run:

npx -p @angular/cli@20 ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Building

To build the project run:

npx -p @angular/cli@20 ng build @felixdulfer/ngx-mat-period-picker

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests, use the following command:

npm test

Running end-to-end tests

For end-to-end (e2e) testing, run:

npx ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Conventional Commits

This project follows the Conventional Commits specification for commit messages. This ensures consistent commit history and enables automatic changelog generation.

Making Commits

Use the interactive commit tool for guided commit creation:

npm run commit

Or commit manually following the conventional format:

git commit -m "feat(period-picker): add new feature"

Commit Message Format

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Common types: feat, fix, docs, style, refactor, perf, test, build, ci, chore

For detailed guidelines, see CONTRIBUTING.md.

📚 Documentation

For detailed documentation, API reference, and examples, see the library README.

🚀 Live Demo

Try the component in your browser:

• GitHub Pages Demo
• StackBlitz Demo (TBD)
• CodeSandbox Demo (TBD)

🔬 PR Preview Environments

This repository automatically creates preview environments for each pull request! When you open a PR, the demo app is automatically built and deployed to a unique URL where you can test your changes.

• Main demo: https://felixdulfer.github.io/ngx-mat-period-picker/
• PR previews: https://felixdulfer.github.io/ngx-mat-period-picker/pr-preview/pr-{number}/

The preview environment is automatically updated whenever you push new commits to your PR branch, and cleaned up when the PR is closed or merged.

🚀 Deployment

Run ./deploy.sh.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.