Add real-time in-app notifications to Angular using the Novu Inbox component and the @novu/js SDK.

<Prompt description="Add Novu Inbox to my Angular app" icon="sparkles" actions={["copy", "cursor"]}>

Add Novu Inbox to Angular App

Install @novu/js. Mount the Inbox in your header, navbar, or sidebar.

Latest docs: https://docs.novu.co/platform/quickstart/angular

Install

npm install @novu/js

Component

import { NovuUI } from '@novu/js/ui';

const novu = new NovuUI({
  options: {
    applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
    subscriber: 'YOUR_SUBSCRIBER_ID',
  },
});

novu.mountComponent({
  name: 'Inbox',
  props: {},
  element: document.getElementById('notification-inbox'),
});

Subscriber ID

Use the app's existing auth system to get a unique user identifier for subscriberId. If no auth system exists, use YOUR_SUBSCRIBER_ID.

Appearance

Extract design tokens from the host app and apply via the appearance configuration. Only set values extracted from the host app's design system.

Rules

ALWAYS:

• Detect the project's package manager and use it for installation
• Mount the Inbox inline in existing UI — no new pages or wrappers
• Follow Angular conventions (services, modules, existing project patterns)
• Use the existing auth system to source subscriberId when available

NEVER:

• Create wrapper components or new pages just for the inbox
• Add code comments
• Introduce styles not in the host app

Verify Before Responding

1. Is @novu/js installed with the project's package manager?
2. Is the Inbox mounted inline in existing UI?
3. Is subscriberId sourced from the auth system when available?

If any fails, revise. </Prompt>

<Step>
## Create an Angular application
Run the following command to create a new Angular app using [angular cli](https://angular.dev/tools/cli/setup-local#install-the-angular-cli):

```bash
ng new novu-inbox-angular
cd novu-inbox-angular
```

Run the following command to install the SDK:

```package-install
npm install @novu/js
```

If you’re signed in to your Novu account, then the <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> and <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip> are automatically entered in the code sample above. Otherwise, you can manually retrieve them: * applicationIdentifier - In the Novu dashboard, click API Keys, and then locate your unique Application Identifier. * subscriberId - This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.

<Note>
  If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.
</Note>

<div #novuInbox></div>

Run Your Application

Start your development server:

npm run start

Once the application is running, a bell icon will appear on the top left side of the screen. Clicking it opens the notification inbox UI.

Currently, there are no notifications. Let’s trigger one!

In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.

1. Go to your Novu dashboard.
2. In the sidebar, click Workflows.
3. Click Create Workflow. Enter a name for your workflow (e.g., "Welcome Notification").
4. Click Create Workflow to save it.
5. Click the Add Step icon in the workflow editor and then select In-App as the step type.
6. In the In-App template editor, enter the following:

- **Subject**: "Welcome to Novu"

- **Body**: "Hello, world! "

7. Once you’ve added the subject and body, close the editor. 8. Click Trigger. 9. Click Test Workflow.

You should see the notification you just sent from Novu! 🎉

Next steps