From 3d9925bc74b61aaabdb127d8eee61dfe4225d2bb Mon Sep 17 00:00:00 2001
From: Mike <mikeybyker@users.noreply.github.com>
Date: Wed, 22 Mar 2017 20:11:43 +0000
Subject: [PATCH] docs: clarify querying all descendants

Updated example to illustrate @ContentChildren default behaviour (only query direct children), and how to query for nested elements/all descendants. PR Close #14417
---
 .../content_children_example.ts               | 20 +++++++++++++++----
 .../e2e_test/content_children_spec.ts         | 18 +++++++++++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/examples/core/di/ts/contentChildren/content_children_example.ts b/packages/examples/core/di/ts/contentChildren/content_children_example.ts
index 8e946284c0474..9e49b2077cc20 100644
--- a/packages/examples/core/di/ts/contentChildren/content_children_example.ts
+++ b/packages/examples/core/di/ts/contentChildren/content_children_example.ts
@@ -17,13 +17,20 @@ export class Pane {
 @Component({
   selector: 'tab',
   template: `
-    <div>panes: {{serializedPanes}}</div> 
+    <div class="top-level">Top level panes: {{serializedPanes}}</div> 
+    <div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div>
   `
 })
 export class Tab {
-  @ContentChildren(Pane) panes: QueryList<Pane>;
+  @ContentChildren(Pane) topLevelPanes: QueryList<Pane>;
+  @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes: QueryList<Pane>;
 
-  get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
+  get serializedPanes(): string {
+    return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : '';
+  }
+  get serializedNestedPanes(): string {
+    return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : '';
+  }
 }
 
 @Component({
@@ -32,7 +39,12 @@ export class Tab {
     <tab>
       <pane id="1"></pane>
       <pane id="2"></pane>
-      <pane id="3" *ngIf="shouldShow"></pane>
+      <pane id="3" *ngIf="shouldShow">
+        <tab>
+          <pane id="3_1"></pane>
+          <pane id="3_2"></pane>
+        </tab>
+      </pane>
     </tab>
     
     <button (click)="show()">Show 3</button>
diff --git a/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts b/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
index c526ede633a9b..1f061af5fe8ad 100644
--- a/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
+++ b/packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
@@ -12,19 +12,29 @@ import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
 describe('contentChildren example', () => {
   afterEach(verifyNoBrowserErrors);
   let button: ElementFinder;
-  let result: ElementFinder;
+  let resultTopLevel: ElementFinder;
+  let resultNested: ElementFinder;
 
   beforeEach(() => {
     browser.get('/core/di/ts/contentChildren/index.html');
     button = element(by.css('button'));
-    result = element(by.css('div'));
+    resultTopLevel = element(by.css('.top-level'));
+    resultNested = element(by.css('.nested'));
   });
 
   it('should query content children', () => {
-    expect(result.getText()).toEqual('panes: 1, 2');
+    expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2');
 
     button.click();
 
-    expect(result.getText()).toEqual('panes: 1, 2, 3');
+    expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2, 3');
+  });
+
+  it('should query nested content children', () => {
+    expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2');
+
+    button.click();
+
+    expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2, 3, 3_1, 3_2');
   });
 });