Skip to content

Commit fb807f5

Browse files
committed
docs: add component method track example to @for block
1 parent c84642a commit fb807f5

1 file changed

Lines changed: 25 additions & 4 deletions

File tree

  • tools/manual_api_docs/blocks

tools/manual_api_docs/blocks/for.md

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ The `@for` block repeatedly renders content of a block for each item in a collec
44

55
```angular-html
66
@for (item of items; track item.name) {
7-
<li>{{ item.name }}</li>
7+
<li>{{ item.name }}</li>
88
} @empty {
9-
<li>There are no items.</li>
9+
<li>There are no items.</li>
1010
}
1111
```
1212

@@ -35,7 +35,28 @@ For collections that remain static , `track $index` provides a straightforward t
3535
collections experiencing additions, deletions, or reordering, opt for a
3636
unique property of each item as the tracking key.
3737

38-
Track expressions can only reference `$index`, the item, and fields from the component class. If the `let` segment of the `@for` block introduced an alias for `$index`, that alias may also be referenced.
38+
Track expressions can only reference `$index`, the item, and members of the component class. If the `let` segment of the `@for` block introduced an alias for `$index`, that alias may also be referenced.
39+
40+
A track expression may reference component methods.
41+
42+
```angular-ts
43+
@Component({
44+
template: `
45+
@for (item of items; track trackByName(item)) {
46+
<li>{{ item.name }}</li>
47+
}
48+
`,
49+
})
50+
class Items {
51+
items: Item[] = [
52+
/* ... */
53+
];
54+
55+
protected trackByName(item: Item): string {
56+
return item.name;
57+
}
58+
}
59+
```
3960

4061
### `$index` and other contextual variables
4162

@@ -54,7 +75,7 @@ These variables are always available with these names, but can be aliased via a
5475

5576
```angular-html
5677
@for (item of items; track item.id; let idx = $index, e = $even) {
57-
Item #{{ idx }}: {{ item.name }}
78+
Item #{{ idx }}: {{ item.name }}
5879
}
5980
```
6081

0 commit comments

Comments
 (0)