title: Using 'this' keyword in Angular component's template
body: <p>Let's say we have a <code>prop</code> variable in the component class and we use it via interpolation in the template (<a href="https://stackblitz.com/edit/angular-ks8ur4?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">stackblitz demo</a>):</p>
  <p>component class:</p>
  <pre class="lang-ts prettyprint-override"><code>@Component({...})
  export class AppComponent  {
    prop = 'Test';
    ...
  }
  </code></pre>
  <p>template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;{{ this.prop }}&lt;/p&gt;
  &lt;p&gt;{{ prop }}&lt;/p&gt;
  </code></pre>
  <p>Why in Angular it's possible to use <code>this</code> keyword in templates without any warnings/error (even in AOT mode)? What's behind it?</p>
  <p><strong>Edit</strong></p>
  <p>According to the remark in the answer: <code>this</code> <em>refers to the component itself for which the template was rendered</em>. But I can also create a template variable and access to it using <code>this</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input #inp&gt; {{ this.inp.value }}
  </code></pre>
  <p>In this case we don't have an <code>inp</code> variable in the component class and I still get the access to it using <code>{{this.inp...}}</code>. Magic?</p>