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