@notifizz/angular

Angular component to embed the Notifizz notification bell and notification center in your Angular app.

Installation

npm install @notifizz/angular
# or
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:

<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_FIREBASE_TOKEN_OR_BACKEND_TOKEN',
    authType: 'firebase',
    position: 'bottom-right',
    userEmail: '[email protected]',
    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

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your Notifizz front API key. | | token | string | Yes | Auth token (Firebase ID token or backend token). | | authType | 'firebase' | 'backendToken' | Yes | How the user is authenticated. | | position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | No | Bell position. | | notificationCenterStyles | { marginTop?: string } | No | Styles for the notification center. | | bellStyles | { marginRight?: string } | No | Styles for the bell. | | userEmail | string | If authType === 'backendToken' | User email. | | userId | string | If authType === 'backendToken' | User ID. |

Custom icon

You can pass a custom bell icon via content projection:

<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_BACKEND_TOKEN',
    authType: 'backendToken',
    position: 'top-right',
    userEmail: '[email protected]',
    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>

The icon is referenced with #customBellIcon and will replace the default bell icon.