Can I use formControl valueChanges to detect changes to a mat-chip-list?

Question

I have a mat-chip-list and want to detect when it changes ie: items added or removed.

I expected I could attach a form control to it and utilise the valueChanges observable to achieve this ie:

<mat-chip-list #chipList [formControl]="chipListCtrl">

chipListCtrl = new FormControl();
...
this.fruitCtrl.valueChanges.pipe(tap(value => console.log('fruitCtrl: ', value))).subscribe();

However this is not logging anything to the console.

Refer to Stackblitz where the input control successfully works in this manner, but the chip list does not.

Is this possible and if so what do I need to do to get it to work?

Answer 1

The chip list does not emit valueChanges because you are not updating it's value. You are updating the fruits array which is in no way connected to your formControl.

I've forked your stackblitz so that the events update the value of your chipListCtrl and the contents of the mat-chip-list are using chipListCtrl.value instead.