Skip to main content

​
Notifizz Angular SDK

The @notifizz/angular package provides an Angular component to embed the Notifizz notification bell and notification center in your Angular application.

​
Installation

npm install @notifizz/angular
Or with Yarn: 
yarn add @notifizz/angular

​
Setup

Import the component in your Angular module or standalone component: 
import { Component } from '@angular/core';
import { NotifizzAngularComponent } from '@notifizz/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [NotifizzAngularComponent]
})
export class AppComponent {}

​
Template

Add the widget to your template using the notifizz-bell selector: 
<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_FIREBASE_TOKEN_OR_BACKEND_TOKEN',
    authType: 'firebase | backendToken | none',
    position: 'bottom-right',
    userEmail: 'user@example.com',
    userId: '12345',
    notificationCenterStyles: { marginTop: '50px' },
    bellStyles: { marginRight: '20px' }
  }"
>
</notifizz-bell>
Use authType: 'backendToken' when using a backend-generated token; then userEmail and userId are required.

​
Options

OptionTypeRequiredDescription
apiKeystringYesYour Notifizz front API key.
tokenstringYesAuth token (Firebase ID token or backend token).
authType'firebase' | 'backendToken' | 'none'YesHow the user is authenticated.
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'NoBell position.
notificationCenterStyles{ marginTop?: string }NoStyles for the notification center.
bellStyles{ marginRight?: string }NoStyles for the bell.
userEmailstringIf authType === 'backendToken'User email.
userIdstringIf authType === 'backendToken'User ID.

​
Backend token authentication

When your backend issues tokens for the Notification Center, set authType: 'backendToken' and provide the user identity: 
<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_BACKEND_TOKEN',
    authType: 'backendToken',
    position: 'top-right',
    userEmail: 'user@example.com',
    userId: '12345'
  }"
>
</notifizz-bell>

​
Custom icon

You can pass a custom bell icon via content projection. Reference it with #customBellIcon to replace the default bell icon: 
<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_BACKEND_TOKEN',
    authType: 'backendToken',
    position: 'top-right',
    userEmail: 'user@example.com',
    userId: '12345'
  }"
>
  <svg #customBellIcon xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"></path>
    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
  </svg>
</notifizz-bell>