fix(aio): fix trackBy demo in template-syntax article

aio/content/examples/template-syntax/src/app/app.component.html

@@ -36,6 +36,7 @@
 <a href="#inputs-and-outputs">Inputs and outputs</a><br>
 <a href="#pipes">Pipes</a><br>
 <a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
 <a href="#enums">Enums</a><br>
 
 <!-- Interpolation and expressions -->
@@ -803,6 +804,12 @@ The null hero's name is {{nullHero && nullHero.name}}
   <!-- #enddocregion safe-6 -->
 </div>
 
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
 <div>
   <!-- #docregion non-null-assertion-1 -->
   <!--No hero, no text -->

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<ElementRef>, changed: () => void) {
   let oldRefs = views.toArray();
   views.changes.subscribe((changes: QueryList<ElementRef>) => {
       const changedRefs = changes.toArray();
-      // Is every changed ElemRef the same as old and in the same position
+      // Check if every changed Element is the same as old and in the same position
-      const isSame = oldRefs.every((v, i) => v === changedRefs[i]);
+      const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement);
       if (!isSame) {
         oldRefs = changedRefs;
         // wait a tick because called after views are constructed

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 <live-example title="Template Syntax Live Code"></live-example>.
+
+
 {@a html}
 ## HTML in templates
 
@@ -1927,6 +1934,7 @@ The display is blank, but the app keeps rolling without errors.
 </code-example>
 
 It works perfectly with long property paths such as `a?.b?.c?.d`.
+
 <a href="#top-of-page">back to top</a>
 
 <hr/>
@@ -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.
 
 
+<a href="#top-of-page">back to top</a>
+
+<hr/>
+
 ## 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.