diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html index 5b2a34421b..860f9436ac 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.html +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -36,6 +36,7 @@ Inputs and outputs
Pipes
Safe navigation operator ?.
+Non-null assertion operator !.
Enums
@@ -803,6 +804,12 @@ The null hero's name is {{nullHero && nullHero.name}} + +top + + +

Non-null assertion operator !.

+
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts index f0fa2a2d23..8211e563c2 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.ts +++ b/aio/content/examples/template-syntax/src/app/app.component.ts @@ -127,6 +127,7 @@ export class AppComponent implements AfterViewInit, OnInit { resetHeroes() { this.heroes = Hero.heroes.map(hero => hero.clone()); this.currentHero = this.heroes[0]; + this.hero = this.currentHero; this.heroesWithTrackByCountReset = 0; } @@ -172,8 +173,8 @@ function trackChanges(views: QueryList, changed: () => void) { let oldRefs = views.toArray(); views.changes.subscribe((changes: QueryList) => { const changedRefs = changes.toArray(); - // Is every changed ElemRef the same as old and in the same position - const isSame = oldRefs.every((v, i) => v === changedRefs[i]); + // Check if every changed Element is the same as old and in the same position + const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement); if (!isSame) { oldRefs = changedRefs; // wait a tick because called after views are constructed diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index 361c62efbf..a22fd58506 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -12,6 +12,13 @@ component class instance (the *component*) and its user-facing template. You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. +This page is a comprehensive technical reference to the Angular template language. +It explains basic principles of the template language and describes most of the syntax that you'll encounter elsewhere in the documentation. + +Many code snippets illustrate the points and concepts, all of them available +in the . + + {@a html} ## HTML in templates @@ -1927,6 +1934,7 @@ The display is blank, but the app keeps rolling without errors. It works perfectly with long property paths such as `a?.b?.c?.d`. + back to top
@@ -1962,6 +1970,10 @@ Rather it tells the TypeScript type checker to suspend strict null checks for a You'll need this template operator when you turn on strict null checks. It's optional otherwise. +back to top + +
+ ## Summary You've completed this survey of template syntax. Now it's time to put that knowledge to work on your own components and directives. diff --git a/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif b/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif index 31f603f27c..716e6a44ba 100644 Binary files a/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif and b/aio/content/images/guide/template-syntax/ng-for-track-by-anim.gif differ