The @novu/notification-center-angular package provides an Angular component wrapper over the Notification Center Web Component that you can use to integrate the notification center into your Angular application.

Installation

Novu supports Angular version 15 and higher.
bash pnpm pnpm i @novu/notification-center-angular bash npm npm i @novu/notification-center-angular bash yarn yarn add @novu/notification-center-angular

Example usage

Module:

import { NotificationCenterModule } from '@novu/notification-center-angular';

@NgModule({
  imports: [..., NotificationCenterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class TheModule {}

Component:

import { Component } from "@angular/core";
import { environment } from "../environments/environment";

@Component({
  selector: "my-component",
  templateUrl: "./component.html",
})
export class AppComponent {
  subscriberId = environment.subscriberId;
  applicationIdentifier = environment.applicationIdentifier;

  sessionLoaded = (data: unknown) => {
    console.log("loaded", { data });
  };
}

Component HTML template:

<notification-center-component
  [subscriberId]="subscriberId"
  [applicationIdentifier]="applicationIdentifier"
  [sessionLoaded]="sessionLoaded"
></notification-center-component>

Props

The notification-center-component accepts the same set of props as the web component.

You may need to add "allowSyntheticDefaultImports": true in tsconfig.json for the web component’s React imports to work correctly.

Example