Hello Devs,

In this tutorial, we are going to learn about badge material ui angular 10.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications for creating Badge, forms, steps, menu

Follow this step by step guide given below:




Create New App

ng new newMat



Add Material Design

ng add @angular/material
Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes



Import Material Badge Module

src/app/app.module.ts

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

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

  

import { AppComponent } from './app.component';

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

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

import {MatButtonModule} from '@angular/material/button';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatBadgeModule,

    MatButtonModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Angular Material Badge Example

src/app/app.component.ts

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

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'newMat';

  

  hidden = false;

  

  incrementCount() {

    this.hidden = !this.hidden;

  }

}

src/app/app.component.html

<h1>Angular Material Badge Example - Rathorji.in</h1>

<p><span matBadge="7" matBadgeOverlap="false">Text with a badge</span></p>

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

   

<p>

  Button with a badge on the left

  <button mat-raised-button color="primary"

      matBadge="8" matBadgePosition="before" matBadgeColor="accent">

    Action

  </button>

</p>

  

<p>

    Button toggles badge visibility

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

        Hide

    </button>

</p>


Angular Material Badge with Increment Example

src/app/app.component.ts

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

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'newMat';

  

  counter = 1;

  

  incrementCount() {

    this.counter++;

  }

}

src/app/app.component.html

<h1>Angular Material Badge Example - Rathorji.in</h1>

<p>

    Click to Raise Number of Badge

    <button mat-raised-button [matBadge]="counter" [matBadgeHidden]="hidden" (click)="incrementCount()">

        Click Me!

    </button>

</p>


Run this command:

ng serve


I hope this example helps you.