Angular Material Badges

In this lecture let's take a look at angular material badges, if you work with bootstrap badges it should seem familiar to you they are basically small status descriptors for UI elements for example if you have to display notifications for a user or the number of unread messages in your inbox badges are the way to go, so let's see what is possible with angular material badges in this lecture.

To be able to use angular material badges we first need to import the badge module in material.module.ts and then add it to MaterialComponents array.

import { MatBadgeModule } from "@angular/material/badge";

const MaterialComponents = [
  MatBadgeModule
];

Now let's create our first badge in app.component.html I'm going to include a span tag with the text notifications to add the badge to this span tag we make use of matBadge attribute and give it a value that you want to appear in the badge I'm going to give it 5.

<div style="margin:20px">
  <span matBadge="5">Notifications</span>
</div>

In the browser you should see the badge in action the small circular element on the top right of span tag text, now this is the most basic badge you can have let see how to customize this.

Customize angular material badge

Badge Position

By default a badge is placed above and after the element it is associated with that is the top right, we can control the position using the matBadgePosition attribute so back in the html file let's make 3 more copies of this div tag and I'm going to specify the matBadgePosition attribute with those values below/above a before/after.

<div style="margin: 50px">
  <span matBadge="5">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgePosition="below before">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgePosition="below after">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgePosition="above before">Notifications</span>
</div>

As you can see in the browser the difference between the possible positions. So matBadgePosition attribute to control the position of the badge.

Badge Sizing

To change the size of our badge we can specify the size using matBadgeSize attribute the possible values are small, medium and large with medium being the default value I'm going to make three more copies of our notification badge and I'm going to add for each one of them I'm going to add matBadgeSize attribute with different values.

<div style="margin: 50px">
  <span matBadge="5" matBadgeSize="large">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeSize="medium">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeSize="small">Notifications</span>
</div>

In the browser you can see how the badges are changing with those values from large to small.

Badge Coloring

You might sometimes want to change the badge's background color, this can be set using the matBadgeColor attribute possible values are primary, accent, warn with primary being the default value, the color of course is determined by the theme of your application is using so back in vscode I'm going to make 3 more copies of the original notification badge and add matBadgeColor for each one of them with different color.

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="primary">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="accent">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="warn">Notifications</span>
</div>

In the browse you can see that the first one's background is not changed because the primary is the default color the second one is the accent color and last one is warn. Again those colors are based on the them in your application.

Badge Overlapping

Now you might have noticed in all the notification badges the badge overlaps with the text, the overlap flag though can be controlled as well we specify the matBadgeOverlap attribute and set it to false. So back in the vscode and let's add the matBadgeOverlap attribute to the last element and give it a value of false.

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="primary">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="accent">Notifications</span>
</div>

<div style="margin: 50px">
  <span matBadge="5" matBadgeColor="warn" matBadgeOverlap="false"
    >Notifications</span
  >
</div>

If you go back to the browser you can see that the badge doesn't overlap with the text anymore, in fact material documentation advices us to overlap badges for icons and not for text for example if you have the inbox icon then overlapping might be a good choice for text however try avoiding overlap as much as possible.

Badge binding and conditional rendering

Finally let's talk about binding values and also conditional rendering, the value for a badge is usually stored in a class property to bind the value we simply use property binding so let's hit back to vscode and open app.component.ts and over there I'm going to create a new property let's call it notifications and give it a value of 2.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "material-demo";
  notifications = "2";
}

And then in the HTML on the very first badge I'm going to have property binding on the matBadge attribute and the property we want to bind to is notifications.

<div style="margin: 50px">
  <span [matBadge]="notifications" matBadgeColor="primary">Notifications</span>
</div>

So now if you go back to the browser the badge indicates two, now sometimes you might also want to conditionally render based on the number of notifications for example when notifications is zero it doesn't really make sense to indicate that we rather hide the badge itself we can do that using matBadgeHidden attribute so back in app.component.html I'm going to add the condition property binding with matBadgeHidden and this is going to be equal to the condition notifications==0.

<div style="margin: 50px">
  <span [matBadge]="notifications" [matBadgeHidden]="notifications == 0"
    >Notifications</span
  >
</div>

Now if you take a look at the browser you can still see the badge two and when notifications=0 and you can see that badge is hidden.

That's how you can conditionally render a badge in angular material using the matBadgeHidden attribute that's pretty much all about angular material badges.