npm package: @notifizz/angular
Description: Angular component to embed the Notifizz notification bell and notification center in your Angular app.
Latest version: 1.2.3

# @notifizz/angular

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

## Installation

```bash
npm install @notifizz/angular
# or
yarn add @notifizz/angular
```

## Setup

Import the component in your Angular module or standalone component:

```typescript
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:

```html
<notifizz-bell
  [options]="{
    apiKey: 'YOUR_FRONT_API_KEY',
    token: 'USER_FIREBASE_TOKEN_OR_BACKEND_TOKEN',
    authType: 'firebase',
    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.

## Inputs and outputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `options` | `NotifizzOptions` | — | Required. Configuration (see Options below). |
| `mountId` | `string` | `'notifizz-notifications'` | ID of the div where the notification center is mounted. |

| Output | Payload | Description |
|--------|---------|-------------|
| `ready` | — | Emitted when the widget is ready. |
| `stateChange` | `NotifizzState` | Emitted when notification state changes (`isReady`, `isOpen`, `unreadCount`, `lastUpdated`). |

## 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; marginLeft?: 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:

```html
<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>
```

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