bug(Chip): Change events on chip list and chip are not firing

[RogierdeRuijter]

🐞 bug report

Description

When clicking on a material chip component. It seems like the chip and chip list do not fire a change event.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-o2npfc?file=src%2Fapp%2Fchips-overview-example.html

In the stackblitz there are methods that catch the events and these methods log something to the console, but this does not happen.

🌍 Your Environment

Angular 9

[brook-w]

have worked out packjson.lock this file caused by

[RogierdeRuijter]

@wumianren Thanks for your response :)

Do you mean that the issue is caused by the package-lock.json file?

[brook-w]

yes
At first, I searched a lot of materials, looked at issues, and did a lot of things

Later, I tried to create a new project to execute the steps of my previous project, and then it succeeded

But at that time, I didn't find the specific reason because I found that I didn't add CDK to my newly created packjson, but it automatically added this package. After that, I tried many times, and my real project still couldn't succeed until I deleted packjson-lock.json, which can successfully build ng build

[brook-w]

When adding drag and drop in the project, I did an operation of uninstall @ angular / CKD once, but it was normal when ng serve was used. Finally, when ng build -- prod was used, it started to report an error

I still can't understand what went wrong

[brook-w]

If you have any doubts about my reply, please forgive me

I use machine translation

My English is not very good

But the general process is that I developed it before

npm i @angular/cdk --->> npm uninstall @angular/ckd ---> start ng build --prod(error) --->delete package-lock.json ---> npm i (auto write package-lock.json)---> ng build --prod(success)

[RogierdeRuijter]

No problem I can understand what you mean :)

Although I don't get build errors. My issue is that the chip events are not firing when I click on one of them, this is more a runtime issue.

But my question is does running the steps below solve the issue that clicking on the chips does not fire a change event?

npm i @angular/cdk --->> npm uninstall @angular/ckd ---> start ng build --prod(error) --->delete package-lock.json ---> npm i (auto write package-lock.json)---> ng build --prod(success)

Cheers

[brook-w]

Yes, it has been settled
But I still can't figure out exactly why caused the error

[brook-w]

However, it is possible that this issue will disappear in future releases

[brook-w]

thank you

[brook-w]

Another question I have is whether it is appropriate to bring it up here
Angular ng builds CSS backgroundimage to the index.html sibling. How does this work under assets

[danmana]

Here is how I managed to make this work.

https://stackblitz.com/edit/angular-ivy-kkps1z

The important part is

<mat-chip *ngFor="let chip of chips"
    #matChip="matChip"
    (click)="matChip.toggleSelected(true)"
...

On click we toggle the selection.
The true parameter is isUserInput and it's important. Without it the mat-chip-list does not dispatch the change event!

Here is the same call used for the SPACE keypress event https://github.com/angular/components/blob/master/src/material/chips/chip.ts#L385