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 8e946284c0..9e49b2077c 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: `
-
panes: {{serializedPanes}}
+ Top level panes: {{serializedPanes}}
+ Arbitrary nested panes: {{serializedNestedPanes}}
`
})
export class Tab {
- @ContentChildren(Pane) panes: QueryList;
+ @ContentChildren(Pane) topLevelPanes: QueryList;
+ @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes: QueryList;
- 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 {
-
+
+
+
+
+
+
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 c526ede633..1f061af5fe 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');
});
});