Building a Notification System in Angular with MagicBell
This article takes a look at how to integrate MagicBell's Notification Inbox into a web application that is built using the Angular framework. Angular, also known as Angular 2 is a TypeScript-based rewrite of the AngularJS framework. It is one of the most popular single-page application (SPA) frameworks in the market today.
CodeScreen and the need for a Notification System
I am Dave Cervi, the founder of CodeScreen, the real-world developer assessment platform, which allows companies to accelerate their hiring by screening engineers fairly, quickly, and accurately.
I was very excited when I came across MagicBell as the thought of offloading the responsibility of sending/displaying notifications to users was hugely attractive, as this would allow me to focus on the core business logic of CodeScreen.
initializeNotifications. This is the function we will call from our TypeScript Angular component.
You will also notice that we are now passing the target and user's email as function arguments. I'll explain this later on in the post.
In order to make this new file available to Angular, we need to add it to the assets folder and refer to it in the .angular-cli.json file.
Note that I am using Angular version 5, for some later versions, the
.angular-cli.json file has been renamed to angular.json.
In order to call the
initializeNotifications function from your TypeScript component class, you first need to declare the function:
You then need to get a handle on the HTML element that will display the MagicBell icon, i.e. the
<div id="notifications-inbox"/> element.
To do this, create an
ElementRef object in your component class that references the element:
The element should then be added to your component's HTML template file:
Finally, you can now call the
initializeNotifications function inside the
ngAfterViewInit functions of your component class:
That's it, you're all set!
This is how the MagicBell notification inbox looks on CodeScreen:
We went live with MagicBell yesterday, and our users are loving it so far!
Thanks for reading!