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.
To follow the steps in this quickstart, you’ll need:
You can also view the completed code of this quick start in a GitHub repo.
To create a new Angular app, open a terminal or command prompt and run the following command:
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:
Once you are in the app directory, you can start the development server by running the following command:
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/`.
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:
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.
Navigate to my-app/src/environments/environment.ts
and add the following variables: subscriberId
, applicationIdentifier
applicationIdentifier
can be found here: https://web.novu.co/settingssubscriberId
can be found here: https://web.novu.co/subscribersCopy 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.
Now, navigate to the app.module.ts
file (my-app/src/app/app.module.ts)
CUSTOM_ELEMENTS_SCHEMA
from '@angular/core'
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)
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.
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:
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.
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.
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:
Channel | Content Style | Custom Variables{{handlebars}} format |
---|---|---|
HTML | ✅ | |
Visual Editor | ✅ | |
SMS | Text | ✅ |
Chat | Text | ✅ |
In-App | Text | ✅ |
Push | Text | ✅ |
Please proceed to create a workflow.
Select the in-app channel
Configure it as per your requirements and then save it
I’ll briefly explain the function of each label in the image above.
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
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.
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:
To trigger a notification, simply run the code below with the correct credentials.
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.
Check your app again. You should see the recently triggered notification!
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.
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.
To follow the steps in this quickstart, you’ll need:
You can also view the completed code of this quick start in a GitHub repo.
To create a new Angular app, open a terminal or command prompt and run the following command:
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:
Once you are in the app directory, you can start the development server by running the following command:
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/`.
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:
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.
Navigate to my-app/src/environments/environment.ts
and add the following variables: subscriberId
, applicationIdentifier
applicationIdentifier
can be found here: https://web.novu.co/settingssubscriberId
can be found here: https://web.novu.co/subscribersCopy 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.
Now, navigate to the app.module.ts
file (my-app/src/app/app.module.ts)
CUSTOM_ELEMENTS_SCHEMA
from '@angular/core'
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)
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.
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:
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.
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.
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:
Channel | Content Style | Custom Variables{{handlebars}} format |
---|---|---|
HTML | ✅ | |
Visual Editor | ✅ | |
SMS | Text | ✅ |
Chat | Text | ✅ |
In-App | Text | ✅ |
Push | Text | ✅ |
Please proceed to create a workflow.
Select the in-app channel
Configure it as per your requirements and then save it
I’ll briefly explain the function of each label in the image above.
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
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.
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:
To trigger a notification, simply run the code below with the correct credentials.
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.
Check your app again. You should see the recently triggered notification!
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.