Chips
Angular Bootstrap 5 Chips component
Responsive chips built with the latest Bootstrap 5, Angular and Material Design. Chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category.
Bootstrap tags and chips categorize content with the use of text and icons. Tags and chips make it easier to browse throughout articles, comments or pages. 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 a tag.
Note: Read the API tab to find all available options and advanced customization
Basic example
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.



<mdb-chip>Text</mdb-chip>
<mdb-chip>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
alt="Contact Person"
/>
John Doe
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-md">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
alt="Contact Person"
/>
John Doe
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-lg">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
alt="Contact Person"
/>
John Doe
<i class="close fas fa-times"></i>
</mdb-chip>
Outline
You can use customClass
input and btn-outline-color
classes to add outline styling to your chip.
<mdb-chip customClass="chip-outline btn-outline-primary">
Primary
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-secondary">
Secondary
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-success">
Success
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-danger">
Danger
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-warning">
Warnign
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-info">
Info
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-light">
Light
<i class="close fas fa-times"></i>
</mdb-chip>
<mdb-chip customClass="chip-outline btn-outline-dark">
Dark
<i class="close fas fa-times"></i>
</mdb-chip>
Placeholder
Type a name and press enter to add a tag. Click X to remove it.
<mdb-chips>
<mdb-form-control
class="chips-input-wrapper chips-transition"
[class.chips-padding]="tags.length > 0"
>
<mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
<span class="text-chip">{{ tag.name }}</span>
<i class="close fas fa-times" mdbChipDelete></i>
</mdb-chip>
<input
mdbChipsInput
class="form-control chips-input"
(chipAdd)="add($event)"
/>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
</mdb-chips>
import { Component } from '@angular/core';
import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';
interface Tag {
name: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
tags: Tag[] = [];
add(event: MdbChipAddEvent) {
this.tags.push({ name: event.value });
event.input.clear();
}
delete(tag: Tag) {
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags.splice(index, 1);
}
}
}
Initial Value
You can set initial tags by adding them to the tags array.
<mdb-chips class="chips-initial">
<mdb-form-control
class="chips-input-wrapper chips-transition"
[class.chips-padding]="tags.length > 0"
>
<mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
<span class="text-chip">{{ tag.name }}</span>
<i class="close fas fa-times" mdbChipDelete></i>
</mdb-chip>
<input mdbChipsInput class="form-control chips-input" (chipAdd)="add($event)" />
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
</mdb-chips>
import { Component } from '@angular/core';
import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';
interface Tag {
name: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
tags: Tag[] = [
{ name: 'MDBReact' },
{ name: 'MDBAngular' },
{ name: 'MDBVue' },
{ name: 'MDB5' },
{ name: 'MDB' },
];
add(event: MdbChipAddEvent) {
this.tags.push({ name: event.value });
event.input.clear();
}
delete(tag: Tag) {
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags.splice(index, 1);
}
}
}
Content Editable
You can use [editable]="true"
input to make a chips content editable.
<mdb-chips class="chips-initial">
<mdb-form-control
class="chips-input-wrapper chips-transition"
[class.chips-padding]="tags.length > 0"
>
<mdb-chip
*ngFor="let tag of tags"
[editable]="true"
(deleted)="delete(tag)"
(edited)="edit(tag, $event)"
>
<span class="text-chip">{{ tag.name }}</span>
<i class="close fas fa-times" mdbChipDelete></i>
</mdb-chip>
<input
mdbChipsInput
class="form-control chips-input"
(chipAdd)="add($event)"
/>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
</mdb-chips>
import { Component } from '@angular/core';
import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';
interface Tag {
name: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
tags: Tag[] = [];
add(event: MdbChipAddEvent) {
this.tags.push({ name: event.value });
event.input.clear();
}
delete(tag: Tag) {
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags.splice(index, 1);
}
}
edit(tag: Tag, event: MdbChipEditedEvent) {
if (!event.value) {
this.delete(tag);
return;
}
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags[index].name = value;
}
}
}
Chips - API
Import
import { MdbChipsModule } from 'mdb-angular-ui-kit/chips';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
…
@NgModule ({
...
imports: [MdbChipsModule, MdbFormsModule],
...
})
Inputs
MdbChipComponent
Name | Type | Default | Description |
---|---|---|---|
customClass |
string | - |
Allows to set custom classes for a chip |
editable |
boolean | false |
Allows to edit chip content. |
Outputs
MdbChipInputDirective
Event type | Description |
---|---|
chipAdd |
Fired on chip add when confirmation key is clicked. |
MdbChipComponent
Event type | Description |
---|---|
deleted |
Fired when a chip is deleted. |
edited |
Fired after a completed chip edition. |
<mdb-chips>
<mdb-form-control
class="chips-input-wrapper chips-transition"
[class.chips-padding]="tags.length > 0"
>
<mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
<span class="text-chip">{{ tag.name }}</span>
<i class="close fas fa-times" mdbChipDelete></i>
</mdb-chip>
<input
mdbChipsInput
class="form-control chips-input"
(chipAdd)="add($event)"
/>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
</mdb-chips>
import { Component } from '@angular/core';
import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';
interface Tag {
name: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
tags: Tag[] = [];
add(event: MdbChipAddEvent) {
this.tags.push({ name: event.value });
event.input.clear();
}
delete(tag: Tag) {
const index = this.tags.indexOf(tag);
if (index >= 0) {
this.tags.splice(index, 1);
}
}
}