fix(material/chips): styling not updating when actions are removed (#26696)

Some of the chip styling depends on the presence of chips actions and it wasn't being updated when they were toggled.

Fixes #26691.

(cherry picked from commit 6c1da5e)

Author: crisbeto

src/material/chips/chip.ts

@@ -10,6 +10,7 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {
   AfterViewInit,
+  AfterContentInit,
   Component,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -25,6 +26,8 @@ import {
   ViewEncapsulation,
   ViewChild,
   Attribute,
+  ContentChildren,
+  QueryList,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {
@@ -41,7 +44,7 @@ import {
   RippleGlobalOptions,
 } from '@angular/material/core';
 import {FocusMonitor} from '@angular/cdk/a11y';
-import {Subject} from 'rxjs';
+import {merge, Subject, Subscription} from 'rxjs';
 import {take} from 'rxjs/operators';
 import {MatChipAvatar, MatChipTrailingIcon, MatChipRemove} from './chip-icons';
 import {MatChipAction} from './chip-action';
@@ -112,7 +115,14 @@ const _MatChipMixinBase = mixinTabIndex(
 })
 export class MatChip
   extends _MatChipMixinBase
-  implements AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy
+  implements
+    AfterViewInit,
+    AfterContentInit,
+    CanColor,
+    CanDisableRipple,
+    CanDisable,
+    HasTabIndex,
+    OnDestroy
 {
   protected _document: Document;
 
@@ -137,9 +147,24 @@ export class MatChip
   /** Whether moving focus into the chip is pending. */
   private _pendingFocus: boolean;
 
+  /** Subscription to changes in the chip's actions. */
+  private _actionChanges: Subscription | undefined;
+
   /** Whether animations for the chip are enabled. */
   _animationsDisabled: boolean;
 
+  /** All avatars present in the chip. */
+  @ContentChildren(MAT_CHIP_AVATAR, {descendants: true})
+  protected _allLeadingIcons: QueryList<MatChipAvatar>;
+
+  /** All trailing icons present in the chip. */
+  @ContentChildren(MAT_CHIP_TRAILING_ICON, {descendants: true})
+  protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
+
+  /** All remove icons present in the chip. */
+  @ContentChildren(MAT_CHIP_REMOVE, {descendants: true})
+  protected _allRemoveIcons: QueryList<MatChipRemove>;
+
   _hasFocus() {
     return this._hasFocusInternal;
   }
@@ -259,8 +284,19 @@ export class MatChip
     }
   }
 
+  ngAfterContentInit(): void {
+    // Since the styling depends on the presence of some
+    // actions, we have to mark for check on changes.
+    this._actionChanges = merge(
+      this._allLeadingIcons.changes,
+      this._allTrailingIcons.changes,
+      this._allRemoveIcons.changes,
+    ).subscribe(() => this._changeDetectorRef.markForCheck());
+  }
+
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
+    this._actionChanges?.unsubscribe();
     this.destroyed.emit({chip: this});
     this.destroyed.complete();
   }

tools/public_api_guard/material/chips.md

@@ -61,8 +61,11 @@ export const MAT_CHIP_TRAILING_ICON: InjectionToken<unknown>;
 export const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;
 
 // @public
-export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
+export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
     constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
+    protected _allLeadingIcons: QueryList<MatChipAvatar>;
+    protected _allRemoveIcons: QueryList<MatChipRemove>;
+    protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
     _animationsDisabled: boolean;
     ariaDescription: string | null;
     _ariaDescriptionId: string;
@@ -91,6 +94,8 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColo
     _isRippleDisabled(): boolean;
     leadingIcon: MatChipAvatar;
     // (undocumented)
+    ngAfterContentInit(): void;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -114,7 +119,7 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColo
     // (undocumented)
     protected _value: any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "ariaDescription": "aria-description"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "ariaDescription": "aria-description"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }