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!