Novu Angular Quickstart Guide

Create a Novu account

Create a Novu account or sign in to an existing account.

Create an Angular application

Create a new Angular app with angular cli using the command below. Skip this step if you already have an existing project:

ng new novu-inbox-angular

Navigate to the newly created project:

cd novu-inbox-angular

Install the required package

Run the command below to install Novu headless SDK, which provides required component for Inbox UI:

npm install @novu/js

Add the Inbox component

Update the src/app/app.component.ts file to add the Inbox component passing applicationIdentifier and subscriberId:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NovuUI } from '@novu/js/ui';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('novuInbox') novuInbox!: ElementRef<HTMLElement>;
  title = 'inbox-angular';
 
  ngAfterViewInit() {
    const novu = new NovuUI({
      options: {
        applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
        subscriberId: 'YOUR_SUBSCRIBER_ID',
      },
    });
 
    novu.mountComponent({
      name: 'Inbox',
      props: {},
      element: this.novuInbox.nativeElement,
    });
  }
}

If you’re signed in to your Novu account, then the applicationIdentifier and subscriberId 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.

Add the Inbox component to your application

Add a #novuInbox reference to your application in the starting of the src/app/app.component.html file:

<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!

Trigger your first notification

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.

View the notification in your app

Go back to your Angular app, then click the bell icon.

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