fix(material-experimental/mdc-chips): chip set not picking up… (#17568)

Fixes the MDC-based chip set not picking up indirect descendant chips.

Author: crisbeto

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

@@ -1,26 +1,27 @@
 import {Component, DebugElement, QueryList} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {CommonModule} from '@angular/common';
 import {By} from '@angular/platform-browser';
 import {MatChip, MatChipSet, MatChipsModule} from './index';
 
 
 describe('MatChipSet', () => {
-  let fixture: ComponentFixture<any>;
-  let chipSetDebugElement: DebugElement;
-  let chipSetNativeElement: HTMLElement;
-  let chipSetInstance: MatChipSet;
-  let chips: QueryList<MatChip>;
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule],
-      declarations: [BasicChipSet],
+      imports: [MatChipsModule, CommonModule],
+      declarations: [BasicChipSet, IndirectDescendantsChipSet],
     });
 
     TestBed.compileComponents();
   }));
 
   describe('BasicChipSet', () => {
+    let fixture: ComponentFixture<any>;
+    let chipSetDebugElement: DebugElement;
+    let chipSetNativeElement: HTMLElement;
+    let chipSetInstance: MatChipSet;
+    let chips: QueryList<MatChip>;
+
     describe('basic behaviors', () => {
       beforeEach(() => {
         fixture = TestBed.createComponent(BasicChipSet);
@@ -71,6 +72,28 @@ describe('MatChipSet', () => {
       });
     });
   });
+
+  it('should sync the disabled state to indirect descendant chips', () => {
+    const fixture = TestBed.createComponent(IndirectDescendantsChipSet);
+    fixture.detectChanges();
+
+    const chipSetDebugElement = fixture.debugElement.query(By.directive(MatChipSet))!;
+    const chipSetInstance = chipSetDebugElement.componentInstance;
+    const chips: QueryList<MatChip> = chipSetInstance._chips;
+
+    expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
+
+    chipSetInstance.disabled = true;
+    fixture.detectChanges();
+
+    expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
+
+    chipSetInstance.disabled = false;
+    fixture.detectChanges();
+
+    expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
+  });
+
 });
 
 @Component({
@@ -86,3 +109,17 @@ class BasicChipSet {
   name: string = 'Test';
   chips = [0, 1, 2, 3, 4];
 }
+
+@Component({
+  template: `
+    <mat-chip-set>
+      <ng-container [ngSwitch]="true">
+        <mat-chip *ngFor="let i of chips">
+          {{name}} {{i + 1}}
+        </mat-chip>
+      </ng-container>
+    </mat-chip-set>
+  `
+})
+class IndirectDescendantsChipSet extends BasicChipSet {
+}

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

@@ -152,7 +152,11 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   }
 
   /** The chips that are part of this chip set. */
-  @ContentChildren(MatChip) _chips: QueryList<MatChip>;
+  @ContentChildren(MatChip, {
+    // We need to use `descendants: true`, because Ivy will no longer match
+    // indirect descendants if it's left as false.
+    descendants: true
+  }) _chips: QueryList<MatChip>;
 
   constructor(protected _elementRef: ElementRef,
               protected _changeDetectorRef: ChangeDetectorRef,