How To Add In-App Notifications To Your Angular App
How to add an in-app notification center to your Angular app
Emil Pearce
TL;DR
This article explains how to add an in-app notification center to your Angular app and gives you a few reasons to smile 🙃
In one of the screenshots, there’s a reference to one of my all-time favorite movies. If you can correctly guess which movie it is and leave your answer in the comments section, I’ll make sure to acknowledge you in some way in my upcoming article. 🤓
Now that you’re happy, we can start the tutorial.
Many notifications that may be convenient or necessary for your use case are available.
Here are some notification (communication) channels you are probably familiar with:
In-App
SMS
Emails
Chat (Discord, Slack, MS Teams, WhatsApp, Telegram)
Push
However, we will eat only 1/5 of this delicious pie – In-App notification. This communication channel allows you to interact with your users within your application.
Assuming you’ve not been living under a rock for the past decade, let’s observe an example of an In-App event-based notification workflow for a social media app like Instagram:
User opens the Instagram app and scrolls through their feed, looking at photos and videos posted by other users.
The user posts a photo or video to their own Instagram profile.
Another user sees the post and likes it.
The Instagram app detects the like event and triggers a notification to the user who posted the content.
The notification appears on the user’s screen, notifying them that another user has liked their post.
The user can either dismiss the notification or tap on it to open the app and view the user who liked their post.
If the user taps on the notification and opens the app, they can see the profile of the user who liked their post and engages with them by liking their posts or following their account.
Now that we know what we’re doing let’s integrate In-App notifications into our app.
Well…It’s not a chicken and egg type of question; we need to have our chicken first – our app.
I recently started experimenting with Angular and have grown quite fond of this framework, but I will not be trying to convince you to join to the dark side.
Prerequisites: (The things you need to ensure you have not lost your hair)
Before we start, make sure you have the following installed on your system:
Node.js
NPM (Node Package Manager)
Angular CLI (Command Line Interface)
Angular version > 0.15.0
If you still need to install these tools, you can download and install them from their official websites.
Step 1: Creating a new Angular app
To create a new Angular app, open a terminal or command prompt and run the following command:
1ng 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.
Step 2: Starting the development server
Navigate to the app directory by running the following command:
1cd my-app
Once you are in the app directory, you can start the development server by running the following command:
1ng 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/.
Step 3: Modifying the app
Now that your app is up and running, you can start modifying it to fit your requirements. You can modify the app by editing the files located in the src directory.
index.html: This file is the main entry point of your app.
app.component.ts: This file contains the main component of your app.
app.component.html: This file contains the HTML template for your app component.
app.component.css: This file contains the CSS styles for your app component.
app.component.spec.ts: This file contains unit tests for the App root.
You can modify these files to add new components, change the layout, and add tests or new functionality to your app.
Signing up for Novu
We will use an out-of-the-box solution for our notifications because we are lazy and constantly looking for shortcuts in life
(those millennials….)
If you tried to build a notification system by yourself in the past, before reading this, you will love me in a few moments.
We will be using Novu, as it’s an open-source notification infrastructure that enables us to trigger an event-based notification workflow.
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.
1ng generate environments
Navigate to my-app/src/environments/environment.ts and add the following variables: subscriberId, applicationIdentifier
Let’s head to my-app/src/app/app.component.ts file
1import{ Component }from'@angular/core';23@Component({4selector:'app-root',5templateUrl:'./app.component.html',6styleUrls:['./app.component.css']7})8exportclassAppComponent{9 title ='my-app';10}
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)
1import{ Component }from'@angular/core';2import{ environment }from'../environments/environment';34@Component({5selector:'app-root',6templateUrl:'./app.component.html',7styleUrls:['./app.component.css']8})9exportclassAppComponent{10 title ='my-app';1112 subscriberId = environment.subscriberId;13 applicationIdentifier = environment.applicationIdentifier;1415styles ={16bellButton:{17root:{18svg:{19color:'white',20width:'45px',21height:'40px',22fill:'white',23},24},25dot:{26rect:{27fill:'rgb(221, 0, 49)',28strokeWidth:'0.2',29stroke:'white',30width:'3.5px',31height:'3.5px',32},33left:'40%',34},35},36header:{37root:{38backgroundColor:'',39'&:hover':{backgroundColor:''},40'.some_class':{color:''},41},42},43layout:{44root:{45backgroundColor:'',46},47},48popover:{49arrow:{50backgroundColor:'',51border:'',52},53},54};5556sessionLoaded=(data: unknown)=>{57 console.log('loaded',{ data });58};59}
You might see some errors in the [localhost:4200](http://localhost:4200) we will fix it now!
This occurs because 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.
We need to add @types/react as dev dependency for the angular component to work properly.
Open your terminal and navigate to the app root directory and type the following:
1npm i @types/react
23or
45yarnadd @types/react
Now head to the my-app/tsconfig.json file
1/* To learn more about this file see: https://angular.io/config/tsconfig. */2{3"compileOnSave":false,4"compilerOptions":{5"baseUrl":"./",6"outDir":"./dist/out-tsc",7"forceConsistentCasingInFileNames":true,8"strict":true,9"noImplicitOverride":true,10"noPropertyAccessFromIndexSignature":true,11"noImplicitReturns":true,12"noFallthroughCasesInSwitch":true,13"sourceMap":true,14"declaration":false,15"downlevelIteration":true,16"experimentalDecorators":true,17"moduleResolution":"node",18"importHelpers":true,19"target":"ES2022",20"module":"ES2022",21"useDefineForClassFields":false,22"lib":[23"ES2022",24"dom"25]26},27"angularCompilerOptions":{28"enableI18nLegacyMessageIdFormat":false,29"strictInjectionParameters":true,30"strictInputAccessModifiers":true,31"strictTemplates":true32}33}
And we’re going to add "allowSyntheticDefaultImports": true to the compilerOptions array.
1/* To learn more about this file see: https://angular.io/config/tsconfig. */2{3"compileOnSave":false,4"compilerOptions":{5"allowSyntheticDefaultImports":true,6"baseUrl":"./",7"outDir":"./dist/out-tsc",8"forceConsistentCasingInFileNames":true,9"strict":true,10"noImplicitOverride":true,11"noPropertyAccessFromIndexSignature":true,12"noImplicitReturns":true,13"noFallthroughCasesInSwitch":true,14"sourceMap":true,15"declaration":false,16"downlevelIteration":true,17"experimentalDecorators":true,18"moduleResolution":"node",19"importHelpers":true,20"target":"ES2022",21"module":"ES2022",22"useDefineForClassFields":false,23"lib":[24"ES2022",25"dom"26]27},28"angularCompilerOptions":{29"enableI18nLegacyMessageIdFormat":false,30"strictInjectionParameters":true,31"strictInputAccessModifiers":true,32"strictTemplates":true33}34}
To see the error resolved, you might need to go to the terminal that is running the app and serve the app again for compilerOptions changes to take effect.
Step 4: Add 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:
1<!-- Toolbar -->2<divclass="toolbar"role="banner">3<img4width="40"5alt="Angular Logo"6src="<TOO LONG FOR DEV.TO MARKDOWN TO PROCESS>"7/>8<span>Welcome</span>9<divclass="spacer"></div>10<divid="bell-icon">11<notification-center-component12[subscriberId]="subscriberId"13[applicationIdentifier]="applicationIdentifier"14[sessionLoaded]="sessionLoaded"15[styles]="styles"16></notification-center-component>17</div>18<aaria-label="Angular on twitter"target="_blank"rel="noopener"href="https://twitter.com/angular"title="Twitter">19<svgid="twitter-logo"height="24"data-name="Logo"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 400 400">20<rectwidth="400"height="400"fill="none"/>21<pathd="<TOO LONG FOR DEV.TO MARKDOWN TO PROCESS>"fill="#fff"/>22</svg>23</a>24<aaria-label="Angular on YouTube"target="_blank"rel="noopener"href="https://youtube.com/angular"title="YouTube">25<svgid="youtube-logo"height="24"width="24"data-name="Logo"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="#fff">26<pathd="M0 0h24v24H0V0z"fill="none"/>27<pathd="<TOO LONG FOR DEV.TO MARKDOWN TO PROCESS>"/>28</svg>29</a>30</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.
And now you should see the bell icon (the notification center) in the toolbar section of your app
Test the notification center
It’s going to be very awkward if you will fail, but don’t let it discourage you and go over the previous steps one more time thoroughly to make sure you haven’t missed/skipped anything.
Now let’s test our notification workflow (template):
You should see a red dot indicating that you have received a notification.
And that’s it!
This is what we’d sought to achieve at the beginning of this tutorial. If you’ve followed till this part and your app is working, pat yourself on the back. Congratulations, you did well!
Going forward, I’ll be sharing many such tutorials and apps in Angular so make sure you stay tuned for that.
Implement push notification services successfully by following this actionable guide on choosing platforms, setting up, and personalizing notifications for better results.
Learn how to integrate real-time notifications into your React app using WebSockets, Server-Sent Events, Firebase Cloud Messaging (FCM), and Novu for improved user engagement and instant updates.
A comprehensive guide for developers on selecting notification platforms, covering different types of notifications (push, in-app, email, SMS, and chat), key features to consider, popular providers, and best practices for implementation. Learn how to evaluate notification platforms based on integration ease, cost-effectiveness, scalability, and security, with practical insights on platforms like FCM, Twilio, SendGrid, and Novu.
Novu is an open-source notification platform
Add a fully customizable Inbox component and email notifications to your app in minutes. No credit card required.