import { COMMA , ENTER } from '@angular/cdk/keycodes' ; import { Component } from '@angular/core' ; import { MatChipInputEvent } from '@angular/material' ; export interface Fruit { name : string ; } title @ Component ( { selector : 'chips-input-example' , templateUrl : 'chips-input-example.html' , styleUrls : [ 'chips-input-example.css' ] , } ) export class ChipsInputExample { visible = true ; selectable = true ; removable = true ; addOnBlur = true ; readonly separatorKeysCodes : number [ ] = [ ENTER , COMMA ] ; fruits : Fruit [ ] = [ { name : 'Lemon' } , { name : 'Lime' } , { name : 'Apple' } , ] ; add ( event ) { const input = event . input ; const value = event . value ; if ( ( value || '' ) . trim ( ) ) { this . fruits . push ( { name : value . trim ( ) } ) ; } if ( input ) { input . value = '' ; } } remove ( fruit ) { const index = this . fruits . indexOf ( fruit ) ; if ( index >= 0 ) { this . fruits . splice ( index , 1 ) ; } } }