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

npm install @novu/notification-center-angular
Novu supports Angular version 0.15.0 only

​
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.

May need to add "allowSyntheticDefaultImports": true in tsconfig.json and @types/react as dev dependency for the angular component to work properly

​
Example

Example Source Code 🔗

Was this page helpful?

VueWeb Component