`@notifizz/angular` SDK reference

@notifizz/angular ships a standalone Angular component (<notifizz-bell>) and an injectable NotifizzService exposing the widget state as an RxJS observable. Use it from any Angular 17+ app.

TL;DR

<notifizz-bell [options]="..." /> — drop-in standalone component that renders the bell + dropdown.
NotifizzService — inject anywhere for programmatic control (open(), close(), toggle(), state$).
Three auth modes via authType: 'firebase', 'backendToken', 'none' (dev-only).
Replace the default bell with content projection (#customBellIcon) — works with any Angular template or component.
Web push opt-in is headless: notifizz.webpushOptIn() plus the reactive webpushStatus$ let you own the button.

Installation

npm install @notifizz/angular

yarn add @notifizz/angular

pnpm add @notifizz/angular

`NotifizzAngularComponent`

A standalone component that renders the bell icon and the 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("widget 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 id for the widget mount point.

Outputs

Output	Type	Description
`ready`	`EventEmitter<void>`	Emitted once 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`	for `firebase`, `backendToken`	—	Auth token from your backend.
`userId`	`string`	for `backendToken`, `none`	—	The user’s unique identifier.
`userEmail`	`string`	for `backendToken`, `none`	—	The user’s email address.
`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://api.notifizz.com/v1`	API base URL.
`widgetPath`	`string`	no	`/v1/widget.js`	Widget script path.

`authType: "none"` example (dev only)

notifizzOptions = {
  apiKey: "YOUR_FRONT_API_KEY",
  authType: "none" as const,
  userId: "dev_user_42",
  userEmail: "dev@example.com",
};

authType: "none" ships unauthenticated widget access — anyone with the apiKey can read any user’s inbox. Use it for local development only. Production must use firebase or backendToken.

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 widget from anywhere in your application — outside 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`	Getter — `true` once the widget has loaded and authenticated.
`isOpen`	`boolean`	Getter — `true` when the dropdown is open.
`unreadCount`	`number`	Getter — current unread count.
`webpushStatus$`	`Observable<WebPushStatus>`	Reactive web push opt-in status for this browser. Emits `'unavailable'` until the widget has booted web push for the signed-in user, then only on change.
`webpushStatus`	`WebPushStatus`	Getter — synchronous snapshot of the same value.

Methods

Method	Returns	Description
`init(options, mountId?)`	`void`	Initialise the widget programmatically (skip the component).
`getState()`	`NotifizzState`	Synchronous snapshot of the current state.
`open()`	`void`	Open the notification center.
`close()`	`void`	Close the notification center.
`toggle()`	`void`	Toggle the notification center.
`webpushOptIn()`	`void`	Trigger the browser permission prompt and subscribe this browser to web push. Call it from a real user gesture.
`webpushOptOut()`	`void`	Drop and revoke this browser’s web push subscription.
`onReady(cb)`	`() => void`	Register a ready callback. Returns unsubscribe.
`onStateChange(cb)`	`() => void`	Register a state change callback. Returns unsubscribe.
`destroy()`	`void`	Clean up the widget and all listeners.

Programmatic initialisation

Skip the component and drive the widget purely via the service:

@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();
  }
}

Web push opt-in

Closed beta. Web push is enabled per organisation and is off by default. Until it is switched on for yours, no campaign can take a push step — so an opt-in collected here would have nothing to deliver. Ask your Notifizz contact to switch it on. Campaigns that already carry a push step keep sending either way.

The opt-in is headless: no bell required, no Notifizz UI. You own the button and its timing, and webpushStatus$ tells you when to show it.

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

@Component({
  selector: "enable-notifications",
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <button
      (click)="notifizz.webpushOptIn()"
      [disabled]="(notifizz.webpushStatus$ | async) !== 'ready'"
    >
      Enable notifications
    </button>
  `,
})
export class EnableNotificationsComponent {
  constructor(public notifizz: NotifizzService) {}
}

`webpushStatus`	Meaning	Your button
`unavailable`	The environment has no push key yet, or the service worker isn’t served	Hide it
`unsupported`	The browser can’t do web push	Hide it
`ready`	Configured, and the user hasn’t decided	Enable it
`subscribed`	Already on	Offer `webpushOptOut()`
`denied`	The user blocked the browser permission	Hide it — only the user can undo this

Call webpushOptIn() from a real click. A permission request that isn’t tied to a user gesture is ignored by the browser, and some browsers penalise the site for asking. Full channel behaviour is in web push.

Internal services

These services are used internally by NotifizzService. You typically don’t need them unless you’re 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).
`webpushStatus$`	`Observable<WebPushStatus>`	Web push status observable, de-duplicated on change.
`isReady` / `isOpen` / `unreadCount` / `webpushStatus`	getters	Convenience accessors.
`getState()`	`NotifizzState`	Synchronous snapshot.
`onReady(cb)`	`() => void`	Register a ready callback.
`onStateChange(cb)`	`() => void`	Register a state change callback.
`destroy()`	`void`	Clean up subscriptions.

`NotifizzCommandService`

Sends commands to the widget. Used internally by NotifizzService.

Method	Description
`open()` / `close()` / `toggle()`	Drive the dropdown.
`webpushOptIn()` / `webpushOptOut()`	Drive the web push subscription.
`send(command, ...args)`	Send an arbitrary command to the underlying widget.

State shape

NotifizzState (delivered through state$, onStateChange, the stateChange output):

Property	Type	Description
`isReady`	`boolean`	`true` once the widget has loaded and authenticated.
`isOpen`	`boolean`	`true` when the dropdown is open.
`unreadCount`	`number`	Current unread notification count.
`lastUpdated`	`number`	Timestamp (ms) of the last state change.
`hasError`	`boolean?`	`true` if the widget hit an auth or network error.
`errorCode`	`string?`	Error identifier when `hasError` is `true`.
`webpushStatus`	`WebPushStatus?`	Web push opt-in status in this browser: `unsupported`, `unavailable`, `ready`, `subscribed`, `denied`. Absent until the widget has booted web push for the signed-in user.

Exported types

import type {
  NotifizzState,
  NotifizzPosition,
  NotifizzBellContext,
  NotifizzWebPush,
  WebPushStatus,
  NotifizzOptions,
} from "@notifizz/angular";

FAQ

Does this work with Angular's NgModule-based app structure?

NotifizzAngularComponent is standalone but importable into any module via imports: [NotifizzAngularComponent]. The same applies if you migrate part of an existing NgModule app to standalone. The NotifizzService is provided in 'root' and works in both setups.

Server-side rendering — what happens?

The widget is browser-only. On the server, NotifizzAngularComponent renders an empty mount <div> and the service no-ops. Hydration on the client triggers script loading and authentication. SSR works without extra config.

Multiple components show different states.

They shouldn’t — NotifizzService is provided in 'root', so every injection sees the same state$ BehaviorSubject. If you see drift, you have probably re-provided the service at the component level (providers: [NotifizzService]), creating a separate instance. Remove the local provider.

`stateChange` fires before `ready`. Is that expected?

Yes. The widget can publish a state update for the cached getState result before the ready event fires (e.g. unreadCount from the previous session). Always gate UI on state.isReady === true if you need post-auth state.

How do I switch user without recreating the component?

Update notifizzOptions.userId / notifizzOptions.token and call notifizz.destroy() then notifizz.init(...) from the service. The component does not currently re-authenticate on [options] change in place — destroy + re-init is the safe path.

Notification Center overview

Lifecycle, state model, positioning, custom bell.

Authentication overview

Pick the right widget auth mode.

Frontend quickstart

Get the widget rendering in under five minutes.

Backend quickstart

Send the events the widget will display.

Get started

Concepts

Use cases

SDKs

AI & MCP

Environments

Plans & usage

Monitor delivery

Glossary

@notifizz/angular SDK Reference

`@notifizz/angular` SDK reference

TL;DR

Installation

`NotifizzAngularComponent`

Basic usage

Inputs

Outputs

Reactive state

`NotifizzOptions`

`authType: "none"` example (dev only)

Custom bell icon

`NotifizzService`

Properties

Methods

Programmatic initialisation

Web push opt-in

Internal services

`NotifizzStateService`

`NotifizzCommandService`

State shape

Exported types

FAQ

See also

Notification Center overview

Authentication overview

Frontend quickstart

Backend quickstart

​@notifizz/angular SDK reference

​TL;DR

​Installation

​NotifizzAngularComponent

​Basic usage

​Inputs

​Outputs

​Reactive state

​NotifizzOptions

​authType: "none" example (dev only)

​Custom bell icon

​NotifizzService

​Properties

​Methods

​Programmatic initialisation

​Web push opt-in

​Internal services

​NotifizzStateService

​NotifizzCommandService

​State shape

​Exported types

​FAQ

​See also

Notification Center overview

Authentication overview

Frontend quickstart

Backend quickstart

`@notifizz/angular` SDK reference

TL;DR

Installation

`NotifizzAngularComponent`

Basic usage

Inputs

Outputs

Reactive state

`NotifizzOptions`

`authType: "none"` example (dev only)

Custom bell icon

`NotifizzService`

Properties

Methods

Programmatic initialisation

Web push opt-in

Internal services

`NotifizzStateService`

`NotifizzCommandService`

State shape

Exported types

FAQ

See also