Angular SDK

The @notifizz/angular package provides a standalone component and injectable services to embed the Notifizz Notification Center in your Angular application.

Installation

npm install @notifizz/angular

NotifizzAngularComponent

A standalone Angular component that renders the bell icon and notification center. Use the notifizz-bell selector in your template.

Basic usage

import { Component } from "@angular/core";
import { NotifizzAngularComponent } from "@notifizz/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NotifizzAngularComponent],
  template: `
    <notifizz-bell
      [options]="notifizzOptions"
      (ready)="onReady()"
      (stateChange)="onStateChange($event)"
    ></notifizz-bell>
  `,
})
export class AppComponent {
  notifizzOptions = {
    apiKey: "YOUR_FRONT_API_KEY",
    authType: "backendToken" as const,
    token: "TOKEN_FROM_BACKEND",
    userId: "user_42",
    userEmail: "alice@example.com",
    position: "top-right" as const,
  };

  onReady() {
    console.log("Notifizz is ready!");
  }

  onStateChange(state: any) {
    console.log("Unread:", state.unreadCount);
  }
}

Inputs

Input	Type	Required	Default	Description
`options`	`NotifizzOptions`	Yes	—	Authentication and display options.
`mountId`	`string`	No	`"notifizz-notifications"`	DOM element ID for the widget mount point.

Outputs

Output	Type	Description
`ready`	`EventEmitter<void>`	Emitted when the widget is ready.
`stateChange`	`EventEmitter<NotifizzState>`	Emitted on every state change.

Reactive state

The component exposes a state$ observable:

@ViewChild(NotifizzAngularComponent) notifizzComponent!: NotifizzAngularComponent;

ngAfterViewInit() {
  this.notifizzComponent.state$.subscribe((state) => {
    console.log("Unread:", state.unreadCount);
  });
}

NotifizzOptions

Option	Type	Required	Default	Description
`apiKey`	`string`	Yes	—	Your Front API Key.
`authType`	`'firebase' \| 'backendToken' \| 'none'`	Yes	—	Authentication strategy.
`token`	`string`	Conditional	—	Required for `firebase` and `backendToken`.
`userId`	`string`	Conditional	—	Required for `backendToken` and `none`.
`userEmail`	`string`	Conditional	—	Required for `backendToken` and `none`.
`position`	`NotifizzPosition`	No	—	Bell position.
`notificationCenterStyles`	`{ marginTop?: string }`	No	—	Notification center style overrides.
`bellStyles`	`{ marginRight?: string; marginLeft?: string }`	No	—	Bell style overrides.
`serverUrl`	`string`	No	`"https://widget.notifizz.com"`	Widget server URL.
`apiUrl`	`string`	No	`"https://eu.api.notifizz.com/v1"`	API base URL.
`widgetPath`	`string`	No	`"/v1/widget.js"`	Widget script path.

Custom bell icon

Replace the default bell using Angular content projection. Use the #customBellIcon template reference:

<notifizz-bell [options]="notifizzOptions">
  <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>

You can use any HTML element or Angular component — just add the #customBellIcon reference.

NotifizzService

An injectable service for programmatic control of the notification center. Use this when you need to interact with the widget from anywhere in your application, not just from the template.

import { Component } from "@angular/core";
import { NotifizzService } from "@notifizz/angular";

@Component({
  selector: "app-header",
  template: `
    <button (click)="notifizz.toggle()">
      Notifications ({{ (notifizz.state$ | async)?.unreadCount }})
    </button>
  `,
})
export class HeaderComponent {
  constructor(public notifizz: NotifizzService) {}
}

Properties

Property	Type	Description
`state$`	`Observable<NotifizzState>`	RxJS observable of the widget state.
`isReady`	`boolean`	Whether the widget is ready (getter).
`isOpen`	`boolean`	Whether the notification center is open (getter).
`unreadCount`	`number`	Current unread count (getter).

Methods

Method	Returns	Description
`init(options, mountId?)`	`void`	Initialize the widget programmatically.
`getState()`	`NotifizzState`	Get a copy of the current state.
`open()`	`void`	Open the notification center.
`close()`	`void`	Close the notification center.
`toggle()`	`void`	Toggle the notification center.
`onReady(cb)`	`() => void`	Register a ready callback. Returns unsubscribe function.
`onStateChange(cb)`	`() => void`	Register a state change callback. Returns unsubscribe function.
`destroy()`	`void`	Clean up the widget and all listeners.

Programmatic initialization

If you prefer to initialize the widget from a service rather than the template:

@Component({
  selector: "app-root",
  template: `<div id="notifizz-mount"></div>`,
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private notifizz: NotifizzService) {}

  ngOnInit() {
    this.notifizz.init(
      {
        apiKey: "YOUR_FRONT_API_KEY",
        authType: "backendToken",
        token: "TOKEN_FROM_BACKEND",
        userId: "user_42",
        userEmail: "alice@example.com",
      },
      "notifizz-mount"
    );
  }

  ngOnDestroy() {
    this.notifizz.destroy();
  }
}

Other services

The services below are used internally by NotifizzService. You typically don’t need them unless you are building advanced integrations or custom state management.

NotifizzStateService

Manages the internal state. Useful if you need fine-grained control over state updates.

Property/Method	Type	Description
`state$`	`Observable<NotifizzState>`	State observable (BehaviorSubject).
`isReady`	`boolean`	Getter.
`isOpen`	`boolean`	Getter.
`unreadCount`	`number`	Getter.
`getState()`	`NotifizzState`	Get state copy.
`onReady(cb)`	`() => void`	Register ready callback.
`onStateChange(cb)`	`() => void`	Register state change callback.
`destroy()`	`void`	Clean up.

NotifizzCommandService

Sends commands to the widget. Used internally by NotifizzService.

Method	Description
`open()`	Open the notification center.
`close()`	Close the notification center.
`toggle()`	Toggle the notification center.
`send(command, ...args)`	Send an arbitrary command to the widget.

Exported types

The following types can be imported from @notifizz/angular:

Type	Description
`NotifizzState`	Widget state object (`isReady`, `isOpen`, `unreadCount`, `lastUpdated`, `hasError?`, `errorCode?`).
`NotifizzPosition`	Position union: `'top-right'`, `'top-left'`, `'bottom-right'`, `'bottom-left'`.
`NotifizzBellContext`	Bell context with state + controls (`unreadCount`, `isOpen`, `isReady`, `toggle`, `open`, `close`).
`NotifizzOptions`	Options passed to the component or `NotifizzService.init()`.
`NotifizzConfig`	Internal configuration (`apiKey`, `apiUrl`, `serverUrl`, `widgetPath`).
`AuthOptions`	Authentication fields (`apiKey`, `authType`, `token?`, `userId?`, `userEmail?`).

Introduction

Concepts

Quickstart

Event Tracking

Notification Center

Authentication

Angular SDK

Angular SDK

Installation

NotifizzAngularComponent

Basic usage

Inputs

Outputs

Reactive state

NotifizzOptions

Custom bell icon

NotifizzService

Properties

Methods

Programmatic initialization

Other services

NotifizzStateService

NotifizzCommandService

Exported types

Next steps

Frontend quickstart

Shared concepts

Introduction

Concepts

Quickstart

Event Tracking

Notification Center

Authentication

​Angular SDK

​Installation

​NotifizzAngularComponent

​Basic usage

​Inputs

​Outputs

​Reactive state

​NotifizzOptions

​Custom bell icon

​NotifizzService

​Properties

​Methods

​Programmatic initialization

​Other services

​NotifizzStateService

​NotifizzCommandService

​Exported types

​Next steps

Frontend quickstart

Shared concepts

Angular SDK

Installation

NotifizzAngularComponent

Basic usage

Inputs

Outputs

Reactive state

NotifizzOptions

Custom bell icon

NotifizzService

Properties

Methods

Programmatic initialization

Other services

NotifizzStateService

NotifizzCommandService

Exported types

Next steps