Static chips an input component for building lists of strings or objects. The list items are displayed as '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}}
 Dynamic chips an input component for building lists of strings or objects. The list items are displayed as 'chips'.
Form Field

You can easily put the 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}}.