Static Chips

Simple

Chip 1 Chip 2 Chip 3

Unstyled

Basic Chip 1 Basic Chip 2 Basic Chip 3

Advanced

Selected/Colored With Events cancel
{{message}}

With avatar and icons

home Home cancel P Portel cancel M Molly Koby cancel Razzle Mal Husi cancel Good star Bad star_border
Dynamic Chips

Form Field

You can easily put the <mat-chip-list> inside of an <mat-form-field>.

{{person.name}} cancel

You can also put <mat-form-field> outside of an mat-chip-list. With matChipInput the input work with chip-list

{{person.name}} cancel

Chips list without input

{{person.name}} cancel

The example above has overridden the [separatorKeys] input to allow for ENTER, COMMA and SEMI COLON keys.

Options

Selectable Removable Add on Blur

Stacked Chips

You can also stack the chips if you want them on top of each other and/or use the (focus) event to run custom code.

{{aColor.name}}

NgModel with chip list

{{aColor.name}} cancel The selected colors are {{color}}.

NgModel with single selection chip list

{{aColor.name}} cancel The selected color is {{selectedColor}}.