Angular Material 13 Notification Badge Component Tutorial

Angular Material 13 notification badge example; This guide will show you how to create badge number indicators as a notification in the Angular component. Not only but we will also show you how to customize the badge notification component using the Angular Material library.

Badges are little status descriptors for user interface elements. A badge is ideally a tiny circle, generally containing a number or other short set of characters, that seems close to another object.

The most common use of Badges is to display number counts and letters over another item, such as icons or buttons. Badge notifies the users regarding some significant information at the same time, it grabs the users’ attention.

In the Angular tutorial, you will easily find out how to display notification badges using the Angular Material badge UI component. You will also discover how to customize the badge notification component using the built-in material properties and options.

Let’s begin creating a badge notification component in a fresh new Angular application.

How to Show Notification Badge in Angular using Angular Material 13

  • Step 1: Set Up Angular Project
  • Step 2: Install Angular Material Module
  • Step 3: Create Material Module File
  • Step 4: Create Badge Notification Component
  • Step 5: Customize Badge UI
  • Step 6: Serve Angular App

Set Up Angular Project

Angular app development begins with installing Node, Npm and Angular CLI on your system hence make sure to have both the tools added in your development machine.

npm install -g @angular/cli

After the Angular CLI is ready, you may now create a new Angular application.

ng new ng-material-demo

Now, move into the application’s root:

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Angular Material Module

Run the given command from the terminal to install the material library in angular app.

ng add @angular/material

Material command will ask some questions, make sure to answer them by following the given information.

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

For using the material UI component, ensure to add the material theme’s CSS in your src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Create Material Module File

In angular project, inside the src/ directory, you have to create material.module.ts file then place the following code within the file.

We imported all the material modules, however if you want you can separately import only MatBadgeModule for building badge component.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Next, import the CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules into the app.module.ts file.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create Badge Notification Component

The notification badge can easily be integrated into an angular component file; use the matBadge property and make sure to define the prop in the html template.

Add the code in app.component.html file.

<p>
  <span matBadge="5" matBadgeOverlap="false">Notification badge</span>
</p>

You can easily add a notification badge to the button; this integration requires the MatIconModule luckily, we had already imported it in our material configuration file.

<p>
  Button with a badge
  <button
    mat-raised-button
    color="primary"
    matBadge="8"
    matBadgePosition="before"
    matBadgeColor="accent"
  >
    Action
  </button>
</p>

Customize Badge UI

We will make you familiar with the various configurations that allow you to customize the notification badge based on your requirements.

Badge Notification Position

By default angular notification badge position appears above after, you can change the direction by just adding the attribute matBadgePosition with before.

<button mat-raised-button color="primary"
    matBadge="8" matBadgePosition="before" matBadgeColor="accent">
  Action
</button>

Notification Badge Sizing

The angular notification badge comes in 3 sizes: small, medium, and large. This UI component comes by default, with medium size, and you can alter the size by adding matBadgeSize to the host element.

<span matBadge="1" matBadgeSize="large">Text with large badge</span>

Notification Badge Visibility

We can easily toggle the badge component visibility to show and hide badge, ensure that you define the matBadgeHidden property.

<button mat-raised-button matBadge="8" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
    Hide
</button>

Add the code in app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  hidden = false;

  toggleBadgeVisibility() {
    this.hidden = !this.hidden;
  }
}

Badge Notification Colors

It is super easy to change the badge notification colors, we can use primary, accent, or warn color styles.

<p>
  <button matBadge="5" mat-raised-button matBadgeColor="primary">
    Primary
  </button>
</p>

<p>
  <button matBadge="5" mat-raised-button matBadgeColor="warn">Warn</button>
</p>

<p>
  <button matBadge="5" mat-raised-button matBadgeColor="accent">Accent</button>
</p>

Serve Angular App

Start the angular’s development server by executing the suggested command.

ng serve --open

Above command will start your app using the following url on the browser:

http://localhost:4200

Angular Material 13 Notification Badge Component Tutorial

Conclusion

In this tutorial, you have learned how to add Badge notifications in Angular by practical examples. We explored the integration process using the material design library. We are sure that implementing the badges in Angular is pretty easy for you now.

If you want to know more about the Angular Material Badge, you can check out the official guide here.