Skip to content

Commit 35c908e

Browse files
chalinfiliph
authored andcommitted
[ng] template-syntax: drop *ngTrackFor examples (#327)
Fixes #303
1 parent 79a99e9 commit 35c908e

File tree

2 files changed

+3
-12
lines changed

2 files changed

+3
-12
lines changed

public/docs/_examples/template-syntax/dart/lib/app_component.html

+1-10
Original file line numberDiff line numberDiff line change
@@ -616,18 +616,9 @@ <h4 id="ngFor-trackBy">NgForTrackBy</h4>
616616
<div *ngFor="let hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
617617
</div>
618618

619-
<p>with <i>*ngForTrackBy</i></p>
620-
<div class="box">
621-
<!-- #docregion NgForTrackBy-2 -->
622-
<div *ngFor="let hero of heroes" *ngForTrackBy="trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
623-
<!-- #enddocregion NgForTrackBy-2 -->
624-
</div>
625-
626619
<p>with <i>generic</i> trackById function</p>
627620
<div class="box">
628-
<!-- #docregion NgForTrackBy-3 -->
629-
<div *ngFor="let hero of heroes" *ngForTrackBy="trackById">({{hero.id}}) {{hero.fullName}}</div>
630-
<!-- #enddocregion NgForTrackBy-3 -->
621+
<div *ngFor="let hero of heroes, trackBy:trackById">({{hero.id}}) {{hero.fullName}}</div>
631622
</div>
632623

633624
<a class="to-toc" href="#toc">top</a>

src/angular/guide/template-syntax.jade

+2-2
Original file line numberDiff line numberDiff line change
@@ -1221,7 +1221,7 @@ figure.image-display
12211221
Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](/angular/api/angular2.common/NgFor-class.html).
12221222

12231223
:marked
1224-
#### NgForTrackBy
1224+
#### NgFor *trackBy*
12251225
The `ngFor` directive has the potential to perform poorly, especially with large lists.
12261226
A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations.
12271227

@@ -1236,7 +1236,7 @@ figure.image-display
12361236
that two objects with the same `hero.id` are the same *hero*. Here is such a function:
12371237
+makeExample('template-syntax/ts/app/app.component.ts', 'trackByHeroes')(format=".")
12381238
:marked
1239-
Now set the `NgForTrackBy` directive to that *tracking* function.
1239+
We identify the tracking function using the ngFor `trackBy` option:
12401240
+makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".")
12411241
:marked
12421242
The *tracking* function doesn't eliminate all DOM changes.

0 commit comments

Comments
 (0)