Mat Badge Customize in Angular 15

Download Code

Badge sizing

import the Angular Material Badge Module File

app.module.ts

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

The badge is available in three different sizes: small, medium, and large. By default, the badge is initially set to medium size. If you want to modify the size, you can do so by adding the attribute "matBadgeSize" to the host element.

app.component.html

<!----------- small Bagde ------------>

<div matBadge="4" matBadgeOverlap="false" matBadgeSize="small" matBadgePosition="before" > Bagde Background & color change </div>

<!----------- medium Bagde ------------>

<div matBadge="1" matBadgeOverlap="true" matBadgeSize="medium" matBadgePosition="after" > Medium Bagde Background & color change </div>

<!----------- large Bagde ------------>

<div matBadge="1" matBadgeOverlap="true" matBadgeSize="large" matBadgePosition="below" > Large Bagde Background & color change </div>

Angular Material Badge size Change CSS

app.component.scss

// small badge css

::ng-deep .mat-badge-small .mat-badge-content {

font-size: 12px !important; // change font size

padding: 2px; // change padding

}

// medium badge css

::ng-deep .mat-badge-medium .mat-badge-content {

font-size: 18px !important; // change font size

padding: 2px; // change padding

}

// small, medium & large badge Font size

::ng-deep .mat-badge-large .mat-badge-content {

font-size: 25px !important; // change font size

padding: 2px; // change padding

}

Badge position

The default positioning of the badge is above and after. You have the flexibility to change the positioning by specifying the attribute "matBadgePosition" followed by either "above" or "below" and "before" or "after".

app.component.html

<!----------- Small Bagde Position (before) ------------>

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

<!----------- Medium Bagde Position (after) ------------>

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

<!----------- Large Bagde Position (below)------------>

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

Angular Material Badge Position Change CSS

app.component.scss

// change small badge position

::ng-deep .mat-badge-small.mat-badge-above .mat-badge-content {

left : -15px !important;

}

// change medium badge position

::ng-deep .mat-badge-medium.mat-badge-above .mat-badge-content {

left : -11px !important;

}

// change large badge position

::ng-deep .mat-badge-large.mat-badge-above .mat-badge-content {

left : -11px !important;

}

Badge Content Background

change the Angular Material Badge Content Background Theme Wise.

app.component.html

<!----------- Bagde Content Background (accent theme) ------------>

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

<!----------- Bagde Content Background (warn theme) ------------>

<button mat-raised-button color="primary" matBadge="8" matBadgePosition="after"> matBadgeColor="warn" > after </button>

<!----------- Bagde Content Background (primary theme) ------------>

<button mat-raised-button color="primary" matBadge="8" matBadgePosition="below"> matBadgeColor="primary" > below </button>

Angular Material Badge Content Background Change CSS

app.component.scss

// change mat-badge content background (accent theme)

::ng-deep .mat-badge-accent .mat-badge-content {

color : #000 !important;

background : #ffbf00 !important;

border-radius : 5px !important;

}

// change mat-badge content background (warn theme)

::ng-deep .mat-badge-warn .mat-badge-content {

color : #fff !important;

background : #12b803 !important;

border-radius : 5px !important;

}

// change mat-badge content background (primary theme)

::ng-deep .mat-badge-primary .mat-badge-content {

color : #fff !important;

background : #0790df !important;

border-radius : 5px !important;

}

Badge Overlaping

You can specify the overlap of the badge in relation to its inner contents by utilizing the matBadgeOverlap tag. Usually, it is desirable for the badge to overlap an icon rather than a text phrase. By default, the badge is set to overlap the inner contents.

app.component.html

<!----------- Badge Overlaping (false) ------------>

<div matBadge="4" matBadgeOverlap="false" matBadgeSize="small" matBadgePosition="before" > Bagde Background & color change </div>

<!----------- Badge Overlaping (true) ------------>

<div matBadge="1" matBadgeOverlap="true" matBadgeSize="medium" matBadgePosition="after" > Medium Bagde Background & color change </div>

<!----------- Badge Overlaping (true) ------------>

<div matBadge="1" matBadgeOverlap="true" matBadgeSize="large" matBadgePosition="below" > Large Bagde Background & color change </div>

change the Angular Material Badge Overlaping Position on Sizing (small, medium & large) Wise Change CSS.

app.component.scss

// change mat-badge Overlaping Position (before) & Size(small)

::ng-deep .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (before) & Size(medium)

::ng-deep .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (before) & Size(large)

::ng-deep .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (after) & Size(small)

::ng-deep .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (after) & Size(medium)

::ng-deep .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (after) & Size(large)

::ng-deep .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (below) & Size(small)

::ng-deep .mat-badge-small.mat-badge-overlap.mat-badge-below .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (below) & Size(medium)

::ng-deep .mat-badge-medium.mat-badge-overlap.mat-badge-below .mat-badge-content {

left : -8px;

}

// change mat-badge Overlaping Position (below) & Size(large)

::ng-deep .mat-badge-large.mat-badge-overlap.mat-badge-below .mat-badge-content {

left : -8px;

}

Badge Toggle Visibility

You have the ability to programmatically control the visibility of the badge by utilizing the attribute "matBadgeHidden". This allows you to easily toggle the badge's visibility based on your requirements.

app.component.html

<!----------- Bagde matBadgeHidden Visibility Toggle ------------>

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

Angular Material Badge Remove Animation.

app.component.scss

// Remove Mat-Badge Animation

::ng-deep .ng-animate-disabled .mat-badge-content, ::ng-deep .mat-badge-content._mat-animation-noopable {

transition : none;

}

// Remove Mat-Badge Animation When Badge Active

::ng-deep .mat-badge-content.mat-badge-active {

transition : none;

}

Badge Toggle Using Toggle Function

app.component.ts

// Boolean Variable

hidden = false;

// Toggle Method

toggleBadgeVisibility() {

this.hidden = !this.hidden;

}

Badge Popup Animation

Angular Material Badge Add Popup Animation Using KeyFrame.

app.component.html

<div matBadge="4" matBadgeOverlap="false" matBadgeSize="small" matBadgePosition="before" > Popup Animation </div>

app.component.scss

// Change Mat Badge Content CSS

.mat-badge-content {

background-color: rgb(255, 128, 149) !important; // change Background Color

color: #000 !important; // change Font Color

border-radius: 5px !important; // change Border Radius

transform: scale(0.5) !important; // change Badge Scale

animation: leaves 0.5s ease-in-out infinite alternate; // change Border Animation

}

// Add Mat-Badge Popup Using KeyFrame Animation

@keyframes leaves {

   0% {

  transform: scale(1.0);   

   }

   100% {

  transform: scale(1.5);   

   }

   0% {

  transform: scale(1.0);   

   }

}