Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with Angular.
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:
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/`.
src/environments/
directory and configure the project to use these files.
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/subscribersmy-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.
app.module.ts
file (my-app/src/app/app.module.ts)
CUSTOM_ELEMENTS_SCHEMA
from '@angular/core'
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)
my-app/tsconfig.json
file, we’re going to add "allowSyntheticDefaultImports": true
to the compilerOptions
array.
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:
<style>
tag, we also want to add some margin to our #bell-icon
so that it looks good next to the other icons.
This bell can be customized to your preference
Channel | Content Style | Custom Variables{{handlebars}} format |
---|---|---|
HTML | ✅ | |
Visual Editor | ✅ | |
SMS | Text | ✅ |
Chat | Text | ✅ |
In-App | Text | ✅ |
Push | Text | ✅ |
Select the in-app channel
Configure it as per your requirements and then save it
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
Subscribers from the left sidebar shows all the subscriber
<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:
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.