Example of a reference expression inside a ngFor and this inside templates

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3>Outer level</h3>
    &lt;span <b>#outerSpan</b>&gt;<span #outerSpan>Template Outer Span</span>&lt;span&gt;<br>
    outerSpan.textContent: {{ outerSpan?.textContent | json }}
    
    <h3>Inner level: ngFor</h3>
    <ul>
    <li *ngFor="let n of nums">
      &lt;span <b>#forSpan</b>&gt;<span #forSpan>Iteration {{ n }}</span>&lt;span&gt;<br> 
      forSpan.textContent: {{ forSpan?.textContent | json }} <br>
      outerSpan.textContent: {{ outerSpan?.textContent | json }} <br><br>
    </li>
    </ul>
    <span>Outside ngFor</span>: forSpan.textContent: {{ forSpan?.textContent | json }}
    
    <h3>Inner level: ngIf</h3>
    <div *ngIf="true">
      &lt;span <b>#ifSpan</b>&gt;<span #ifSpan>Inside ngIf</span>&lt;span&gt;<br>
      ifSpan.textContent: {{ ifSpan?.textContent | json }}
    </div>
    <br>
    <span>Outside ngIf</span>: ifSpan.textContent: {{ ifSpan?.textContent | json }}
    
    <h3>Aliasing with componen variable</h3>
    <span>outerFn()</span>: {{ outerFn() | json }}<br><br>

    <h3>This component inspection</h3>
    <span>thisFn()</span>: {{ thisFn() | json }}<br>
    <span>this</span>: {{ this | json }}<br><br>
    <span>thisFn().outerSpan.textContent</span>: {{ thisFn().outerSpan.textContent | json }}<br>
    <span>this.outerSpan.textContent</span>: {{ this.outerSpan.textContent | json }}<br>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  nums = [1,2,3];
  outerSpan = {textContent: 'Component outer span'};
  outerFn() {
    return this.outerSpan && this.outerSpan.textContent;
  }
  thisFn() {
    return this;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Angular Quickstart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      
      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
      h3, span { color: black; }
    </style>

    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script> window.autoBootstrap = true; </script>

    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->