Increasingly more web pages ask permission to show notifications like the one below that are displayed outside the page at system level. We are going to show you how to display system notifications in Angular.

It’s very simple to show system notifications in Angular without the need to resort to external libraries, we just need to produce a service that allows us to create a notification from the title, content, notification icon, etc, from anywhere in our appliction.

For this, we use the Notification API in the service: https://developer.mozilla.org/en-US/docs/Web/API/notification where apart from the previous options we can indicate what happens when the user clicks on the notification, if we want it to be hidden after a while or what to do if the message can’t be shown because of an error (there are also events for when the notification is displayed or closed ) :


In order to display notifications we must request the users permission, we can do this when opening the page or just before trying to show the first notification as shown in the example, the service asks for permission if the user has not yet granted it and only then is the notification created:

Firefox:

Edge:

Once permission is granted we can now create notifications, various web browsers like Chrome show a maximum of three simultaneously:


I’ve created a small example of how you can use system notifications to let the user know when new articles have been added to Brintias blog, it’s a page where after clicking on the images a notification appears with the article that corresponds to the clicked image and then the article opens in a tab if you click on the notification.

The URL is: https://brnt-ngsystemnotifexample.stackblitz.io/

 

 

Written by: Daniel Macho