Skip to main content

Angular Component

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
note

Novu supports Angular version >0.15.0.

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.

info

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