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.

Integration walkthrough

MagicBell already provides the following JavaScript code to display their notification inbox inside your application:

However, we can't use this directly as every Angular component's application logic is written in TypeScript, which means we have to perform some extra steps in order to call MagicBell's JavaScript code from our TypeScript code...

1. Adding a JavaScript file to your Angular project

We first need to include the JavaScript file in our Angular project.
To do this, create a new file called magicBell.js and add MagicBell's JavaScript code (the code between the <script> tags given above) to this file.

Note we are wrapping the JavaScript code in another function called 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.

2. Calling the JavaScript code from your TypeScript class

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 ngOnInit or 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!
Try it yourself.

Relates articles:

1. Building a notification system in Ruby on Rails: DB Design
2. A Guide to Notification System Design