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 WaNotificationService into your Angular component or service where you want to use it.

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

2. Inject the WaNotificationService into your component.

// via inject
notificationAPIService = inject(WaNotificationService);

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