Notification API for Angular

This is a library for declarative use of Notification API with Angular.

Install

npm i @ng-web-apis/notification

Usage

1. Import the NotificationService into your Angular component or service where you want to use it.

import {NotificationService} from '@ng-web-apis/notification';

2. Inject the NotificationService into your component's constructor or with inject (Angular 14+).

// in constructor
constructor(private notificationAPIService: NotificationService) {}

// via inject
notificationAPIService = inject(NotificationService);

3. Use the requestPermission and open methods to request permission and open a notification.

this.notificationAPIService
  .requestPermission()
  .pipe(
    filter((permission) => permission === 'granted'),
    switchMap(() =>
      this.notificationAPIService.open('Hello world!', {
        body: 'This is a notification',
        requireInteraction: true,
      }),
    ),
  )
  .subscribe();

Demo

You can try online demo here

See also

Other Web APIs for Angular by @ng-web-apis