Adding Badge Notifications with Ionic 5 and Angular

Thomas George
Apr 30 · 4 min read
Image for post
Image for post
Thanks to Pexels for the Cover Image

So you have an app that you’ve been working on for a while, and you can picture the perfect item to add next. A way for people who use your app to know when they have something that needs their attention.

Recently, I’ve had the same thought and found a few issues with implementing it in an Ionic application successfully. So here i’ll go through adding it and possible issues you might have with making it build and successfully run.

Getting Started

The only items you will need to get started is your project you wish to add Badge Notifications to, (obviously) a working computer, and internet connection.

Adding the code

The last time I checked the Ionic documentation had three different pages all talking about different ways to implement Badge Notifications. In these pages, there was only one that worked for our specific goal in mind, the second was speaking about adding Badge Notification Icons to your project (on tabs or columns) and the last was an outdated version of what we were trying to do that only worked on Ionic 3.

If you’re using Cordova:

ionic cordova plugin add cordova-plugin-badgenpm 
install @ionic-native/badge

If you’re using Capacitor:

npm install cordova-plugin-badgenpm 
install @ionic-native/badge
ionic cap sync

Next, we will be adding the code required to actually make it work in your project.

Starting out, open the page you would like to add the Badge Notification to. Once you have opened the file you would like to use it on, add the following to the import section of your file.

import { Badge } from '@ionic-native/badge/ngx';

In the Constructor, add private badge: Badge to the list.

There are four main functions used for Badge manipulation. The first being this.badge.set() which takes in one argument of type integer to set the badge count to. For example:

public notifyUser() {
if(thisUser.notifications.value >== 0){
this.badge.set(this.notifications.value);
}
}

The next function used for Badge manipulation is this.badge.increase() which takes in one argument of type integer to add to the current badge count.

public updateBadge() {
if(SOMETHING_HAS_CHANGED) {
this.badge.increase(NUMBER_TO_ADD_TO_CURRENT);
}
}

There is another function that does the opposite of the previous function we spoke about and that is this.badge.decrease() which also takes in one argument of type integer. However, instead of incrementing the current badge count, it decrements. For example, if you would like to keep track of if a user has view some notifications but not all, you can simply:

public updateBadge(countToDecrement) {
this.badge.decrease(countToDecrement);
}

The last and final main function that the Badge class gives us is this.badge.clear(); which clears the current badge count and removes it from displaying on the app icon. An example of how this would work is:

public updateBadge(currentBadgeCount) {
if(currentBadgeCount === 0) {
this.badge.clear();
}
}

Issues I’ve Faced and Their Solutions

While adding this to my very own project, I came into some issues. Whether they were from me just not knowing the common practices of adding a new feature to an Ionic App, or if it was truly an issue. Either way, I have added them below to make sure y’all don’t have to go through them and spend hours traversing the internet in search for fixes.

ERROR Error: StaticInjectorError(AppModule)[Badge]: 
StaticInjectorError(Platform: core)[Badge]:
NullInjectorError: No provider for Badge!

This error will show in the Console Window after you run ionic serve and nothing displays on the page that loads. To fix this issue, go into your app.module.ts file and in the ‘Providers’ section, and add Badge into the list. The final thing to do to fix this issue is add the following line at the top where the import list is:

import { Badge } from '@ionic-native/badge/ngx';

Once you add those two things, re-build and run your project and it should fix your issue.

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Thomas George

Written by

💻 1st Phorm #Ionic Mobile Applications #Developer ☕️ Espresso Fanatic 🇺🇸 Chauvinist www.thethomasgeorge.com

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Thomas George

Written by

💻 1st Phorm #Ionic Mobile Applications #Developer ☕️ Espresso Fanatic 🇺🇸 Chauvinist www.thethomasgeorge.com

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store