Angular

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with Angular.

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications and integrate a rich, customizable and ready-to-use real-time UI In-App notification center in Angular apps.

Requirements

To follow the steps in this quickstart, you’ll need:

• A Novu account. Sign up for free if you don’t have one yet
• Angular CLI (Command Line Interface) installed on your machine
• Angular version 15 or higher

You can also view the completed code of this quick start in a GitHub repo.

Create a new Angular app

To create a new Angular app, open a terminal or command prompt and run the following command:

ng new my-app

Here, my-app is the name of your new Angular app. This command will create a new Angular app with a basic file structure and all the necessary dependencies installed.

Navigate to the app directory by running the following command:

cd my-app

Once you are in the app directory, you can start the development server by running the following command:

ng serve

This command will start the development server and launch your app in the default browser. You can access your app by navigating to http://localhost:4200/.

This command will start the development server and launch your app in the default browser. You can access your app by navigating to `http://localhost:4200/`.

Install Novu Angular Notification Center Package

The Novu Angular package provides a Angular component wrapper over the web component that you can use to integrate the notification center into your Angular application.

Navigate to the root directory of your Angular application. Now install the Angular Notification Center package by running the following command in your terminal:

pnpm

pnpm i @novu/notification-center-angular

Configuring Application Environments

Using the Angular CLI, start by running the generate environments command shown here to create the src/environments/directory and configure the project to use these files.

ng generate environments

Navigate to my-app/src/environments/environment.ts and add the following variables: subscriberId, applicationIdentifier

• applicationIdentifier can be found here: https://web.novu.co/settings
• subscriberId can be found here: https://web.novu.co/subscribers

export const environment = {
  production: false,
  subscriberId: '',
  applicationIdentifier: '',
};

Copy and paste the same code into my-app/src/environments/environment.development.ts

These variables are needed for the GET request our notification center will make to Novu’s API to push notifications into the feed.

Adding Novu Module

Now, navigate to the app.module.ts file (my-app/src/app/app.module.ts)

• Import CUSTOM_ELEMENTS_SCHEMA from '@angular/core'
• Add Novu’s notification center module

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NotificationCenterModule } from '@novu/notification-center-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NotificationCenterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Head to my-app/src/app/app.component.ts file.

⚠️ The app.component.ts file is a critical part of an Angular application, as it defines the root component and provides the foundation for the rest of the app’s functionality.

Now, we are going to import the environment variables to make them accessible in the app.component.html and the styles properties of our notification center

(there are many properties, but you can discover them later on)

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'my-app';

  subscriberId = environment.subscriberId;
  applicationIdentifier = environment.applicationIdentifier;

  styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white',
        },
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '',
        '&:hover': { backgroundColor: '' },
        '.some_class': { color: '' },
      },
    },
    layout: {
      root: {
        backgroundColor: '',
      },
    },
    popover: {
      arrow: {
        backgroundColor: '',
        border: '',
      },
    },
  };

  sessionLoaded = (data: unknown) => {
    console.log('loaded', { data });
  };
}

The Angular component is generated as a wrapper around the original React component. This approach is clever, as it allows Novu’s engineers to focus on creating and developing things in the React way.

Additionally, many other frameworks can still use the created components using the wrapping approach.

Now head to the my-app/tsconfig.json file, we’re going to add "allowSyntheticDefaultImports": true to the compilerOptions array.

{
  "compilerOptions": {
+   "allowSyntheticDefaultImports": true,
  }
}

Use & Display The Notification Center Component

Open the my-app/src/app/app.component.html file.

This file contain the CSS code along with the HTML one - ideally you should separate the CSS to the my-app/src/app/app.component.css file, but it’s not mandatory.

We will add our notification center to the .toolbar div.

Paste the following into your app.component.html file:

  <div id="bell-icon">
    <notification-center-component
      [subscriberId]="subscriberId"
      [applicationIdentifier]="applicationIdentifier"
      [sessionLoaded]="sessionLoaded"
      [styles]="styles"
    ></notification-center-component>
  </div>

And in the <style> tag, we also want to add some margin to our #bell-icon so that it looks good next to the other icons.

.toolbar #bell-icon {
  height: '';
  margin: 0 16px;
}

Run your app again. Now you should see the bell icon (the notification center) in the toolbar section of your app.

You should now see a bell button that opens the notification center when clicked. This bell can be customized to your preference.

This bell can be customized to your preference

Note: There are no notifications because none has been triggered yet. When notifications are sent to a subscriber, it will show up in the UI. Next, we’ll learn how to trigger notifications.

• Angular Notification Center Example Repo

Create A Workflow

The first step to trigger notifications is to create a workflow. A workflow is like a map that holds the entire flow of messages sent to the subscriber.

The recipients of a triggered notification are called subscribers.

The workflow includes the following:

• Workflow name and Identifier
• Channel tailored content:

Channel	Content Style	Custom Variables {{handlebars}} format
Email	HTML	✅
	Visual Editor	✅
SMS	Text	✅
Chat	Text	✅
In-App	Text	✅
Push	Text	✅

Please proceed to create a workflow.

1. Click Workflows on the left sidebar of your Novu dashboard.
2. Click the “Create Workflow” button on the top right.
3. The name of the new workflow is currently “Untitled.” Rename it to a more suitable title.
4. Select “In-App” as the channel you want to add.

Select the in-app channel

5. Click on the recently added In-App channel and configure it according to your preferences. Once you’re done, click Update to save your configuration.

Configure it as per your requirements and then save it

I’ll briefly explain the function of each label in the image above.

• 1-Preview: Shows you a glimpse of how each notification item will look like in the Notification Center UI.
• 2-Avatar: If turned on, each notification item will show the avatar of the subscriber.
• 3-Action: With this, you can add a primary and secondary call to action button to each notification item.
• 4-Notification Feeds: This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
• 5-Redirect URL - This is the URL to which a subscriber can be directed when they click on a notification item.
• 6-Filter - This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber’s online status to send them an email if they were online within the last hour. Read more about filters.

Feel free to add only text for now and rename the workflow to Onboarding In App. It automatically creates a slug-like Identifier that will be needed in later steps to trigger a notification.

Configure it as shown in this image

Rename the workflow as shown here

Next, we’ll learn how to create subscribers on Novu - Recipients of Notifications

Create A Subscriber

Click Subscribers on the left sidebar of the Novu dashboard to see all subscribers. By default, the dashboard will display a subscriber, as you were added automatically during sign-up.

Subscribers from the left sidebar shows all the subscriber

Now, let’s create a subscriber on Novu.

Novu has a plethora of backend SDKs (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin) to choose from to create a subscriber programmatically. This is the recommended method.

import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.identify('123', {
  firstName: 'Emil',
  lastName: 'Pearce',
  returnUser: true,
});

Obtain your API key from your Novu dashboard. Replace <NOVU_API_KEY> with it.

Now check your Novu dashboard. You should see the recently created subscriber.

You can also update the subscriber info like so:

import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.update('123', {
  firstName: 'Emil', // new first name
  lastName: 'Pearce', // new last name
});

Trigger A Notification

To trigger a notification, simply run the code below with the correct credentials.

import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.trigger('onboarding-in-app', {
  to: {
    subscriberId: '132',
  },
});

onboarding-in-app is the workflow identifier we created earlier.

Ensure the subscriberId value in the backend code that triggers the notification matches the subscriberId in your my-app/src/environments/environment.ts code.

export const environment = {
  production: false,
  subscriberId: '',
  applicationIdentifier: '',
};

Check your app again. You should see the recently triggered notification!

Conclusion

Great job! If you’ve reached this point, you should now have successfully set up the notification center, created a subscriber, a workflow, configured a channel provider and triggered a notification in your Angular application.