Angular Material Badge

Updated February 15, 2023

Introduction to Angular Material Badge

The angular material badge is the status of small descriptors for the element of UI; basically, a badge consists of a small circle containing the number or a set of characters appearing in another object. It is applied to elements of the block level. By default, badges are placed above and after; we can change the direction by defining the attribute name as mat badge position followed by before and after.

What is Angular Material Badge?

• Overlap of the badge in relation to the content is defined by using the tag of mat badge overlap. So, we need a badge for icon overlapping and text phrase.
• It contains three sizes as large, medium, and small. Although the badge is set as a medium by default, we can also change the badge size by adding the mat badge size for the host element.
• Angular material badge visibility is toggled while defining the mat badge hidden. Badges are colored using current themes for mat badge color property by setting the color as warn, accent and primary.
• Angular badges give a description that is meaningful using mat badge description. The description is applied via aria described by using an element decorated with a mat badge.
• While applying the badge as a mat icon, it is essential to know the icon is marked as aria-hidden. Badge and icon combination is the meaningful information that is surfaced in another way.
• It displays the count of notifications; we can say unread messages are in the mail. The selector of the mat badge is used for displaying the top UI element badges. The badge is part of the mat badge module’s Angular material module.

Create Angular Material Badge

• The mat badge is a directive of angular, which was used to create the badges, a small status descriptor for the elements of UI. The angular badge elements carry a short set of characters appearing in another UI element.
•  Below we are creating the project of angular material badge.
• For creating the angular material badge project, we need to install angular material CLI in our system.

1. In the below example, we are installing angular material CLI on the ubuntu system. In the below example, we are installing angular CLI by using the npm command as follows.

Code:

npm install -g @angular/cli

Output:

2. In the below example, first, we are creating a new project name angular-material-badge; at the time of creating the project, we are using routing as yes and the style sheet format as yes.

Code:

ng new angular-material-badge

Output:

3. We are installing the below packages used when developing the application. This package is used to import the module into our application. We are installing these packages by using the npm command as follows.

Code:

npm install @angular/material –save

Output:

4. Below, we are adding the library to our project. We are using the ng add command to add the library to the project. Also, we are setting the global angular material typography style as yes. Finally, we are defining angular material browser animations as yes as follows.

Code:

cd angular-material-badge/
ng add @angular/material

Output:

5. Now, we are implementing the app.module.ts file. We are importing the browser module, forms module, mat badge module, and browser animation modules in this file.

Code:

import { FormsModule } from '@angular/forms';
……
@NgModule({
imports:
[ BrowserModule,
FormsModule,
MatBadgeModule,
BrowserAnimationsModule],
Declarations : [ AppComponent ],
Bootstrap : [ AppComponent ]
})
export class AppModule { }

Output:

6. In the below example, we are creating the app.component.html file.

Code:

<p> <span matBadge = "4" matBadgeOverlap = "false"> MailBox </span> </p>
<p>
…….
</button>
</p>
<p><mat-icon matBadge = "15" matBadgeColor = "warn"> Inbox </mat-icon></p>

Output:

Angular Material Badge Module

• As we know that angular badges are the status descriptor of UI elements. The angular badge is nothing but a combination of a short set character and a small circle.
• The angular badge appears in proximity to another object. So we need to import the following module while working with a badge. In the below example, we can see that we are importing the MatBadgeModule by using the angular material badge.

Code:

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

Output:

The angular material badge provides below directives as follows:

• matBadge: The badge’s content contains a set of characters.
• matBadgePosition: It will be used to sets the position and accepts the combination.
• matBadgeSize: It is used to set the badge size as a medium, small or large.
• matBatchColor: It is used to set the badge color as an accent, warn, or primary.
• matBadgeDisabled: The boolean value is used to enable and disable the badge.
• matBatchHidden: The boolean value is used to show and hide the badge.
• matBadgeDescription: It is used to sets a message which was used to describe the element.

Example of Angular Material Badge

The below example shows the angular material batch as follows.

In the below example, first, we are creating a new project name angular-material-badge1; at the time of creating the project, we are using routing as yes and the format of style sheet as yes.

Code:

ng new angular-material-badge1

Output:

Below we are adding the library to our project as follows. We are using the ng add command to add the library to the project. We define angular material browser animations as yes.

Code:

cd angular-material-badge1/
ng add @angular/material

Output:

Now we are implementing the app.module.ts file as follows.

Code:

import { FormsModule } from '@angular/forms';
……
@NgModule({
export class AppModule { }

Output:

Below we are creating the app.component.html file and running the project as follows.

Code:

<h3> Angular material badge</h3>
<p>
…..
</mat-icon>
</p>

Output:

Conclusion

We need a badge for icon overlapping and text phrase. Angular material badges are the status of small descriptors for the element of UI; basically, a badge consists of a small circle containing the number or a set of characters appearing in another object.

Recommended Articles

This is a guide to Angular Material Badge. Here we discuss the introduction and create an angular material badge and example. You may also have a look at the following articles to learn more –

1. Angular Material Overlay
2. Angular Material NPM
3. Angular material radio button
4. Angular material slider