bug(mat-chip): ngIf on matChipRemove breaks style

[eLarocque]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi,
When using the mat-chip with a button that has the matChipRemove directive combined with the *ngIf structural directive, as the condition changes from true / false, the mat-chip does not seem to correctly handle the state change in it's css styling.

Reproduction

Steps to reproduce:

1. add a mat-chip in your template

2. add a button with an matChipRemove directive and an *ngIf directive that resolves a condition
   

3. change the condition value so the button is removed/added to the DOM
   

Notice that the padding of the chips does not reflect the state.

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

Expected Behavior

Should apply correct styling (ex: padding)

Actual Behavior

The text and size of the padding are broken after a structural change

Environment

• Angular: 15.2.0
• CDK/Material: 15.2.0
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[eLarocque]

The workaround I am currently using is to manually call the changeDetection on the mat chip when the condition bound to the *ngIf changes.

Something like so:

// Add a reference to the matChip found in the template
@ViewChild(MatChip) matChip!: MatChip;

// Manually call the matChip's detectChanges when the condition bound to the *ngIf changes 
this.matChip._changeDetectorRef.detectChanges();

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}