Angular Bootstrap tags, labels & badges

Angular Tags, Labels & Badges - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap tags are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how convenient it is to find all the articles related to web development just by using web development tag.

Labels

This is the first heading New

This is the second heading New

This is the third heading New

This is the fourth heading New

This is the fifth heading New
This is the sixth heading New
        
            
        <h1>This is the first heading <mdb-badge color="red">New</mdb-badge></h1>
        <h2>This is the second heading <mdb-badge color="cyan">New</mdb-badge></h2>
        <h3>This is the third heading <mdb-badge color="amber darken-2">New</mdb-badge></h3>
        <h4>This is the fourth heading <mdb-badge color="pink">New</mdb-badge></h4>
        <h5>This is the fifth heading <mdb-badge color="purple darken-2">New</mdb-badge></h5>
        <h6>This is the sixth heading <mdb-badge color="indigo">New</mdb-badge></h6>

Contextual colors badges

Add any of the below mentioned modifier classes to change the appearance of a tag.

Default Primary Success Info Warning Danger 
        
            
          <mdb-badge default="true">Default</mdb-badge>
          <mdb-badge primary="true">Primary</mdb-badge>
          <mdb-badge success="true">Success</mdb-badge>
          <mdb-badge info="true">Info</mdb-badge>
          <mdb-badge warning="true">Warning</mdb-badge>
          <mdb-badge danger="true">Danger</mdb-badge>

Pills badges

Default Primary Success Info Warning Danger 
        
            
          <mdb-badge pill="true" default="true">Default</mdb-badge>
          <mdb-badge pill="true" primary="true">Primary</mdb-badge>
          <mdb-badge pill="true" success="true">Success</mdb-badge>
          <mdb-badge pill="true" info="true">Info</mdb-badge>
          <mdb-badge pill="true" warning="true">Warning</mdb-badge>
          <mdb-badge pill="true" danger="true">Danger</mdb-badge>

Badges with icons

        
            
          <mdb-badge default="true">
            <mdb-icon fab icon="facebook"></mdb-icon>
          </mdb-badge>
          <mdb-badge primary="true">
            <mdb-icon fab icon="instagram"></mdb-icon>
          </mdb-badge>
          <mdb-badge success="true">
            <mdb-icon fab icon="snapchat-ghost"></mdb-icon>
          </mdb-badge>
          <mdb-badge info="true">
            <mdb-icon fas icon="anchor"></mdb-icon>
          </mdb-badge>
          <mdb-badge warning="true">
            <mdb-icon far icon="sun"></mdb-icon>
          </mdb-badge>
          <mdb-badge danger="true">
            <mdb-icon fas icon="battery-three-quarters"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="pink">
            <mdb-icon fas icon="wheelchair"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="light-blue">
            <mdb-icon far icon="heart"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="indigo">
            <mdb-icon fas icon="bullhorn"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="purple">
            <mdb-icon far icon="comments"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="orange">
            <mdb-icon fas icon="coffee"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="green">
            <mdb-icon fas icon="user"></mdb-icon>
          </mdb-badge>
          <mdb-badge color="indigo">
            <mdb-icon fab icon="android" size="2x"></mdb-icon>
          </mdb-badge>
          <mdb-badge color="cyan">
            <mdb-icon fas icon="cog" size="2x"></mdb-icon>
          </mdb-badge>
          <mdb-badge color="orange">
            <mdb-icon fab icon="btc" size="2x"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="teal">
            <mdb-icon fas icon="heart" size="2x"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="green">
            <mdb-icon fab icon="apple" size="2x"></mdb-icon>
          </mdb-badge>
          <mdb-badge pill="true" color="purple">
            <mdb-icon fas icon="users" size="2x"></mdb-icon>
          </mdb-badge>

Chips MDB Pro component

With avatar


Contact Person Jane Doe 
        
            
          <div class="chip">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.webp" alt="Contact Person"> Jane Doe
          </div>

Without avatar


Tag 1 
        
            
          <div class="chip" *ngIf="hideElement">
            Tag 1
            <mdb-icon fas icon="times" class="close" (click)="hideElement=!hideElement"></mdb-icon>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'chips-basic-example',
            templateUrl: 'chips.component.html',
          })
          export class ChipsComponent {
            hideElement: boolean = true;
          }

Chips usage MDB Pro component

Adding tags


Type a name and press enter to add tag. Click X to remove it. 

        
            
          <mdb-material-chips [(ngModel)]="addtags"></mdb-material-chips>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'chips-add-example',
            templateUrl: 'chips.add.component.html',
          })

          export class ChipsAddComponent {
            hideElement: boolean = true;
            addtags: string[] = [];
          }

Set initial tags 

        
            
          <mdb-material-chips [(ngModel)]="initialtags"></mdb-material-chips>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'chips-initial-example',
            templateUrl: 'chips.initial.component.html',
          })

          export class ChipsInitialComponent {
            hideElement: boolean = true;
            addtags: string[] = [];
            initialtags: string[] = ['Tag 1', 'Tag 2', 'Tag 3'];
          }

Placeholer 

        
            
          <mdb-material-chips [(ngModel)]="addtags" placeholder="+Tag"></mdb-material-chips>
          OR
          <mdb-material-chips [(ngModel)]="addtags" [placeholder]="placeholderVar"></mdb-material-chips>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'chips-placeholder-example',
            templateUrl: 'chips.placeholder.component.html',
          })

          export class ChipsPlaceholderComponent {
            placeholderVar: string = "Your placeholder";
          }

Clear tags button 

        
            
          <div class="chip" *ngIf="hideElement">
            Tag 1
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 2
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 3
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 4
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 5
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 6
          </div>
          <div class="chip" *ngIf="hideElement">
            Tag 7
          </div>

          <button mdbBtn color="primary" mdbWavesEffect (click)="hideElement=!hideElement">clear tags</button>

Angular Tags, Labels & Badges - API

In this section you will find informations about required modules and available outputs of the tags component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { MaterialChipsModule, BadgeModule, IconsModule, WavesModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { BadgeModule, IconsModule, WavesModule } from 'angular-bootstrap-md'
        
        
    
        
            
          import { FormsModule } from '@angular/forms'
Import example Modules list

Inputs

MDBBadge
Name Type Default Description Example
default boolean - Allow to apply default color to badge [default]="true"
primary boolean - Allow to apply primary color to badge [primary]="true"
success boolean - Allow to apply success color to badge [success]="true"
info boolean - Allow to apply info color to badge [info]="true"
warning boolean - Allow to apply warning color to badge [warning]="true"
danger boolean - Allow to apply danger color to badge [danger]="true"
pill boolean - Allow to apply pill color to badge [pill]="true"
color string - Allow to apply color class to the component color="red"
classInside string - Allow to apply class only to the component inside element classInside="dropdown-toggle"

Outputs

MaterialChipsComponent
Name Type Description Example
tagsfocusedChange EventEmitter<boolean> Event fired when Material Chip input got focus or when focus is out (tagsfocusedChange)="onTagsfocusedChange($event)"
labelsChange EventEmitter<string[]> Event fired when length of the chips array has changed (labelsChange)="onLabelsChange($event)"