angular-notification

A singleton, global Angular service to programmatically render notifications.

Table of contents

• Installation
• Available APIs
  • NotificationService
  • NotificationConfiguration
  • Theme
• Example Usage
  • Code example
  • Result

Installation

• npm

  npm i -S @babybeet/angular-notification

• pnpm

  pnpm i -S @babybeet/angular-notification

• yarn

  yarn add @babybeet/angular-notification

Available APIs

These are the symbols that are available from this package

NotificationService

A singleton Angular service to programmatically show notifications.

class NotificationService {
  /**
   * Set the default theme that will be used for all notifications created in the future.
   *
   * @param theme The new theme to be used as the default.
   */
  static setDefaultTheme(theme: Theme): void;

  /**
   * Set the default label for the close button. Default is `Close`.
   */
  static setDefaultCloseButtonLabel(label: string): void;

  /**
   * Open a notification using the provided configuration. The opened notification
   * will be closed automatically after 10 seconds by default.
   *
   * @param notificationConfiguration The notification configuration object.
   */
  open(notificationConfiguration: NotificationConfiguration);
}

NotificationConfiguration

The configuration object for the notification to be created.

interface NotificationConfiguration {
  /**
   * The optional number of milliseconds after which the notification is closed. Default is 10 seconds.
   */
  autoCloseMs?: number;

  /**
   * The optional class name to add for this notification.
   */
  className?: string;

  /**
   * The optional label for the notification's close button. Default is `Close`.
   */
  closeButtonLabel?: string;

  /**
   * The required notification content to show. HTML is supported.
   */
  content: string;

  /**
   * The optional theme for the floating box. Default is `light`.
   */
  theme?: Theme;
}

Theme

type Theme = 'dark' | 'light';

Example Usage

Code example

// Import the service into your class to start using it
import { NotificationService } from '@babybeet/angular-notification';

@Component({
  selector: 'test-component',
  template: `
    <button
      type="button"
      (click)="showNotification()">
      Click me
    </button>
  `
})
export class TestComponent {
  constructor(private readonly notificationService: NotificationService) {}

  showNotification() {
    this.notificationService.open({
      content: 'This notification is very <strong>important</strong>'
    });
  }
}

Result

| Theme | | | ----- | ------------------------------------------------------------------------------ | | Light | | | Dark | |