diff --git a/adev/src/content/guide/components/queries.md b/adev/src/content/guide/components/queries.md index 5e80d0764b6..075d2c738af 100644 --- a/adev/src/content/guide/components/queries.md +++ b/adev/src/content/guide/components/queries.md @@ -15,7 +15,7 @@ There are two categories of query: **view queries** and **content queries.** View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `viewChild` function. - +```typescript {highlight: [14, 15]} @Component({ selector: 'custom-card-header', /*...*/ @@ -25,14 +25,14 @@ export class CustomCardHeader { } @Component({ -selector: 'custom-card', -template: 'Visit sunny California!', + selector: 'custom-card', + template: 'Visit sunny California!', }) export class CustomCard { -header = viewChild(CustomCardHeader); -headerText = computed(() => this.header()?.text); + header = viewChild(CustomCardHeader); + headerText = computed(() => this.header()?.text); } - +``` In this example, the `CustomCard` component queries for a child `CustomCardHeader` and uses the result in a `computed`. @@ -40,7 +40,7 @@ If the query does not find a result, its value is `undefined`. This may occur if You can also query for multiple results with the `viewChildren` function. - +```typescript {highlight: [17]} @Component({ selector: 'custom-card-action', /*...*/ @@ -50,16 +50,16 @@ export class CustomCardAction { } @Component({ -selector: 'custom-card', -template: ` Save + selector: 'custom-card', + template: `Save Cancel `, }) export class CustomCard { -actions = viewChildren(CustomCardAction); -actionsTexts = computed(() => this.actions().map(action => action.text); + actions = viewChildren(CustomCardAction); + actionsTexts = computed(() => this.actions().map(action => action.text); } - +``` `viewChildren` creates a signal with an `Array` of the query results. @@ -69,7 +69,7 @@ actionsTexts = computed(() => this.actions().map(action => action.text); Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `contentChild` function. - +```typescript {highlight: [14, 15]} @Component({ selector: 'custom-toggle', /*...*/ @@ -79,26 +79,26 @@ export class CustomToggle { } @Component({ -selector: 'custom-expando', -/_..._/ + selector: 'custom-expando', + /* ... */ }) export class CustomExpando { -toggle = contentChild(CustomToggle); -toggleText = computed(() => this.toggle()?.text); + toggle = contentChild(CustomToggle); + toggleText = computed(() => this.toggle()?.text); } @Component({ -/_ ... _/ -// CustomToggle is used inside CustomExpando as content. - template: ` +/* ... */ +// CustomToggle is used inside CustomExpando as content. +template: ` + Show ` }) -export class UserProfile { } - -In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in a `computed`. +export class UserProfile { } +``` If the query does not find a result, its value is `undefined`. This may occur if the target element is absent or hidden by `@if`. Angular keeps the result of `contentChild` up to date as your application state changes. @@ -106,7 +106,7 @@ By default, content queries find only _direct_ children of the component and do You can also query for multiple results with the `contentChildren` function. - +```typescript {highlight: [14, 16, 17, 18, 19, 20]} @Component({ selector: 'custom-menu-item', /*...*/ @@ -116,24 +116,26 @@ export class CustomMenuItem { } @Component({ -selector: 'custom-menu', -/_..._/ + selector: 'custom-menu', + /*...*/ }) + export class CustomMenu { -items = contentChildren(CustomMenuItem); -itemTexts = computed(() => this.items().map(item => item.text)); + items = contentChildren(CustomMenuItem); + itemTexts = computed(() => this.items().map(item => item.text)); } @Component({ -selector: 'user-profile', -template: ` + selector: 'user-profile', + template: ` + Cheese Tomato ` }) export class UserProfile { } - +``` `contentChildren` creates a signal with an `Array` of the query results. @@ -213,6 +215,7 @@ All query functions accept an options object as a second parameter. These option By default, the query locator indicates both the element you're searching for and the value retrieved. You can alternatively specify the `read` option to retrieve a different value from the element matched by the locator. ```ts + @Component({/*...*/}) export class CustomExpando { toggle = contentChild(ExpandoContent, {read: TemplateRef}); @@ -229,7 +232,7 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`. By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants. `contentChild` queries do traverse into descendants by default. - +```typescript {highlight: [13, 14, 15, 16]} @Component({ selector: 'custom-expando', /*...*/ @@ -240,8 +243,8 @@ export class CustomExpando { } @Component({ -selector: 'user-profile', -template: ` + selector: 'user-profile', + template: ` Show @@ -249,7 +252,7 @@ template: ` ` }) export class UserProfile { } - +``` In the example above, `CustomExpando` cannot find `` with `contentChildren` because it is not a direct child of ``. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates. @@ -266,7 +269,7 @@ You can alternatively declare queries by adding the corresponding decorator to a You can query for a single result with the `@ViewChild` decorator. - +```typescript {highlight: [14, 16, 17, 18]} @Component({ selector: 'custom-card-header', /*...*/ @@ -276,17 +279,17 @@ export class CustomCardHeader { } @Component({ -selector: 'custom-card', -template: 'Visit sunny California!', + selector: 'custom-card', + template: 'Visit sunny California!', }) export class CustomCard { -@ViewChild(CustomCardHeader) header: CustomCardHeader; + @ViewChild(CustomCardHeader) header: CustomCardHeader; -ngAfterViewInit() { -console.log(this.header.text); + ngAfterViewInit() { + console.log(this.header.text); + } } -} - +``` In this example, the `CustomCard` component queries for a child `CustomCardHeader` and accesses the result in `ngAfterViewInit`. @@ -296,7 +299,7 @@ Angular keeps the result of `@ViewChild` up to date as your application state ch You can also query for multiple results with the `@ViewChildren` decorator. - +```typescript {highlight: [17, 19, 20, 21, 22, 23]} @Component({ selector: 'custom-card-action', /*...*/ @@ -306,21 +309,22 @@ export class CustomCardAction { } @Component({ -selector: 'custom-card', -template: ` Save + selector: 'custom-card', + template: ` + Save Cancel `, }) export class CustomCard { -@ViewChildren(CustomCardAction) actions: QueryList; + @ViewChildren(CustomCardAction) actions: QueryList; -ngAfterViewInit() { -this.actions.forEach(action => { -console.log(action.text); -}); + ngAfterViewInit() { + this.actions.forEach(action => { + console.log(action.text); + }); + } } -} - +``` `@ViewChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property. @@ -328,7 +332,7 @@ console.log(action.text); You can query for a single result with the `@ContentChild` decorator. - +```typescript {highlight: [14, 16, 17, 18, 25]} @Component({ selector: 'custom-toggle', /*...*/ @@ -338,26 +342,28 @@ export class CustomToggle { } @Component({ -selector: 'custom-expando', -/_..._/ + selector: 'custom-expando', + /*...*/ }) -export class CustomExpando { -@ContentChild(CustomToggle) toggle: CustomToggle; -ngAfterContentInit() { -console.log(this.toggle.text); -} +export class CustomExpando { + @ContentChild(CustomToggle) toggle: CustomToggle; + + ngAfterContentInit() { + console.log(this.toggle.text); + } } @Component({ -selector: 'user-profile', -template: ` + selector: 'user-profile', + template: ` + Show ` }) export class UserProfile { } - +``` In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`. @@ -367,7 +373,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state You can also query for multiple results with the `@ContentChildren` decorator. - +```typescript {highlight: [15, 17, 18, 19, 20, 21]} @Component({ selector: 'custom-menu-item', /*...*/ @@ -377,29 +383,31 @@ export class CustomMenuItem { } @Component({ -selector: 'custom-menu', -/_..._/ + selector: 'custom-menu', + /*...*/ }) -export class CustomMenu { -@ContentChildren(CustomMenuItem) items: QueryList; -ngAfterContentInit() { -this.items.forEach(item => { -console.log(item.text); -}); -} +export class CustomMenu { + @ContentChildren(CustomMenuItem) items: QueryList; + + ngAfterContentInit() { + this.items.forEach(item => { + console.log(item.text); + }); + } } @Component({ -selector: 'user-profile', -template: ` + selector: 'user-profile', + template: ` + Cheese Tomato ` }) export class UserProfile { } - +``` `@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.