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.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling