Angular 4 + Material Design - removable chips

Question

I need removable chips like above:

https://material.angularjs.org/latest/demo/chips

But I have to write it in Angular 4. How can I redo these chips https://material.angular.io/components/chips/overview to removable?

Now I have to bind it to textarea like this:

<div class="row">
            <div class="form-group col-md-6">
                <label for="myChips">Chips:</label>
                <textarea class="form-control" rows="2" type="text" id="myChips" [(ngModel)]="myChips" name="myChips" placeholder="Write chips here"></textarea> 
            </div>
        </div>

How can I bind these chips as in the example from angularjs.org?

Answer 1

First import font-awesome to your project or have a close icon available (I used font-awesome for my example).

Then you can add the icon in the chip and add a click event to it. When the close icon is clicked pass the index of it and remove it from it's origin.

Example html:

<md-chip-list>
  <md-chip *ngFor="let chip of chips; let i = index"  
           color="accent">
    {{chip}}
    <i class="fa fa-close" (click)="remove(i)"></i>
  </md-chip>
</md-chip-list>  

component.ts:

chips = [
 'Apple',
 'Orange',
 'Banana',
 'Mango',
 'Cherry'
]

remove(item){
  this.chips.splice(item, 1);
}

Plunker demo