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.
pnpm i @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