fix(material-experimental/mdc-chips): leading icon not hidden on init when preselected (#17997)

Fixes the leading icon of a preselected chip not being hidden on init.

Fixes #17979.

Author: crisbeto

src/material-experimental/mdc-chips/BUILD.bazel

@@ -73,6 +73,7 @@ ng_test_library(
         "@npm//@angular/common",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
+        "@npm//@material/chips",
         "@npm//material-components-web",
         "@npm//rxjs",
     ],

src/material-experimental/mdc-chips/chip-option.spec.ts

@@ -5,6 +5,7 @@ import {Component, DebugElement, ViewChild} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
+import {chipCssClasses} from '@material/chips';
 import {Subject} from 'rxjs';
 import {
   MatChipEvent,
@@ -269,6 +270,22 @@ describe('MDC-based Option Chips', () => {
         expect(chipNativeElement.getAttribute('aria-disabled')).toBe('true');
       });
     });
+
+    it('should hide the leading icon when initialized as selected', () => {
+      // We need to recreate the fixture before change detection has
+      // run so we can capture the behavior we're testing for.
+      fixture.destroy();
+      fixture = TestBed.createComponent(SingleChip);
+      testComponent = fixture.debugElement.componentInstance;
+      testComponent.selected = true;
+      fixture.detectChanges();
+      chipDebugElement = fixture.debugElement.query(By.directive(MatChipOption))!;
+      chipNativeElement = chipDebugElement.nativeElement;
+      chipInstance = chipDebugElement.injector.get<MatChipOption>(MatChipOption);
+
+      const avatar = fixture.nativeElement.querySelector('.avatar');
+      expect(avatar.classList).toContain(chipCssClasses.HIDDEN_LEADING_ICON);
+    });
   });
 });
 
@@ -280,6 +297,7 @@ describe('MDC-based Option Chips', () => {
                  [color]="color" [selected]="selected" [disabled]="disabled"
                  (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
                  (selectionChange)="chipSelectionChange($event)">
+          <span class="avatar" matChipAvatar></span>
           {{name}}
         </mat-chip-option>
       </div>

src/material-experimental/mdc-chips/chip-option.ts

@@ -14,8 +14,10 @@ import {
   EventEmitter,
   Input,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation,
+  AfterContentInit
 } from '@angular/core';
+import {chipCssClasses} from '@material/chips';
 import {take} from 'rxjs/operators';
 import {MatChip} from './chip';
 
@@ -61,7 +63,7 @@ export class MatChipSelectionChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatChipOption extends MatChip {
+export class MatChipOption extends MatChip implements AfterContentInit {
 
   /** Whether the chip list is selectable. */
   chipListSelectable: boolean = true;
@@ -116,6 +118,14 @@ export class MatChipOption extends MatChip {
   @Output() readonly selectionChange: EventEmitter<MatChipSelectionChange> =
       new EventEmitter<MatChipSelectionChange>();
 
+  ngAfterContentInit() {
+    super.ngAfterContentInit();
+
+    if (this.selected && this.leadingIcon) {
+      this.leadingIcon.setClass(chipCssClasses.HIDDEN_LEADING_ICON, true);
+    }
+  }
+
   /** Selects the chip. */
   select(): void {
     if (!this.selectable) {