You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tools/manual_api_docs/blocks/for.md
+25-4Lines changed: 25 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@ The `@for` block repeatedly renders content of a block for each item in a collec
4
4
5
5
```angular-html
6
6
@for (item of items; track item.name) {
7
-
<li>{{ item.name }}</li>
7
+
<li>{{ item.name }}</li>
8
8
} @empty {
9
-
<li>There are no items.</li>
9
+
<li>There are no items.</li>
10
10
}
11
11
```
12
12
@@ -35,7 +35,28 @@ For collections that remain static , `track $index` provides a straightforward t
35
35
collections experiencing additions, deletions, or reordering, opt for a
36
36
unique property of each item as the tracking key.
37
37
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
+
```
39
60
40
61
### `$index` and other contextual variables
41
62
@@ -54,7 +75,7 @@ These variables are always available with these names, but can be aliased via a
54
75
55
76
```angular-html
56
77
@for (item of items; track item.id; let idx = $index, e = $even) {
0 commit comments