Angular Bootstrap Tags, Labels & Badges

Tags in all their simplicity are a method of categorizing your content with use of a specific word, phrases or formulas, making it easier for your user to browse throughout your articles, comments or pages as a whole.

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.

Jane Doe

Anna Black

Tag 1

Tag 2

Tag 3

Example heading New

Default
Primary
Success
Info
Warning
Danger

Chips MDB Pro component

With avatar

Jane Doe


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

Without avatar

Tag 1



    Tag 1


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

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

Labels

Example heading New


<h2 class="h1">Example heading <span class="badge red">New</span></h2>
<h2>Example heading <span class="badge blue">New</span></h2>
<h3>Example heading <span class="badge black">New</span></h3>
<h4>Example heading <span class="badge green">New</span></h4>
<h5>Example heading <span class="badge grey">New</span></h5>
<h6>Example heading <span class="badge indigo">New</span></h6>

Contextual variations

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

Default Primary Success Info Warning Danger


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

Usage MDB Pro component

Adding tags

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


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


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

OR


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>

API Reference:

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.

API Reference for MDB Angular Material Chips:

// Only for Material Chips
import { MaterialChipsModule } from 'ng-uikit-pro-standard'

Import example Modules list