How to remove all the items in an p-chips input inside PrimeNG datatable by clicking on a link?

Question

I need help in removing all items in a primeng p-chips input inside PrimeNG datatable when user clicks on "remove all".

In this case, I want to remove all the selections of carBrandOptions for that row when user clicks on remove all link. I am looking for typescript code for this. Thank you!

<p-column header="Column 5" editable]="true">
  <ng-template let-col let-carBrands="rowData" pTemplate="body">
    <p-multiSelect [options]="carBrandOptions" [(ngModel)]="carBrands[col.field]" defaultLabel='Select'
       [style]="{'width':'100%'}" (onChange)="onMultiSelectChanged($event)"></p-multiSelect>
      <div>
        <div>
            <p-chips [(ngModel)]="carBrands[col.field]">
            </p-chips>
        </div>
        <div>
          <a (click)="removeAll(carBrands)">remove all</a>
      </div>
      </div>
  </ng-template>  
</p-column>

Answer 1

Concerning typescript code, you just need to set an empty array to the options property of the row you're working on.

Something like below should be enough :

removeAll(carBrands) {
    carBrands.options = [];
}

And associated HTML :

<p-column header="Column 5" [editable]="true">
  <ng-template let-col let-carBrands="rowData" pTemplate="body">
    <p-multiSelect [options]="carBrandOptions" [(ngModel)]="carBrands['options']" defaultLabel='Select'
       [style]="{'width':'100%'}" (onChange)="onMultiSelectChanged($event)"></p-multiSelect>
      <div>
        <div>
            <p-chips [(ngModel)]="carBrands['options']">
            </p-chips>
        </div>
        <div>
          <a (click)="removeAll(carBrands)">remove all</a>
      </div>
      </div>
  </ng-template>  
</p-column>

See working Plunker

Is that what you're looking for ?