Angular MDBootstrap Badges Component

Last Updated : 12 Apr, 2025

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Badges Component in Angular MDBootstap.

The Badges Component is used to represent the text as a status indicator or number as a badge.

Properties:

default: It allows the user to apply the default color to a badge.
primary: It allows the user to apply primary color to the badge.
success: It allows the user to apply the success color to the badge.
info: It allows the user to apply info color to the badge.
warning: It allows the user to apply a warning color to the badge.
danger: It allows the user to apply a danger color to the badge.
pill: It allows the user to apply pill color to the badge.
color: It allows the user to apply the color class to the component.
classInside: It allows the user to apply class only to the component inside the element,

Syntax:

<mdb-badge> Badge </mdb-badge>

Approach:

Download Angular MDBootstrap from the official site.
Extract the files to the current working directory.
Install npm in the current project using the following command:

npm install

After creating your project folder i.e. appname, move to it using the following command:

cd appname

Start the server using the following command:

ng serve

Project Structure: After complete installation, it will look like the following:

Project Structure

Example 1: This is the basic example that illustrates how to use the Badges component in Angular MDBootstrap.

app.component.html

<div id="gfg">
  <h2>
    GeeksforGeeks
    <mdb-badge color="green">Badge 1</mdb-badge>
  </h2>
  <h4>
    Angular MDBootstrap Badges Component
    <mdb-badge color="red">Badge 2</mdb-badge>
  </h4><br />
</div>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

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

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Angular MDBootstra Default Badges Component

Example 2: This example illustrates the Angular MDBootstrap Pill Badges Component.

app.component.html

<div id="gfg">
  <h2>
    GeeksforGeeks
    <mdb-badge pill="true" color="green">Badge 1</mdb-badge>
  </h2>
  <h4>
    Angular MDBootstrap Badges Component
    <mdb-badge pill="true" color="red">Badge 2</mdb-badge>
  </h4><br />
</div>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

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

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}