title: Angular Cannot access "this" in displayWith component method where component uses Material Autocomplete
body: <p>In the latest versions of Angular, I was using the following HTML:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; [displayWith]=&quot;displayFn&quot;&gt;
      &lt;mat-option *ngFor=&quot;let entity of entityNames&quot; [value]=&quot;entity.EntityId&quot;&gt;
       {{ entity.EntityName }}
      &lt;/mat-option&gt;
  </code></pre>
  <p>Inside my regular angular component the <code>displayFn</code> method appears like this:</p>
  <pre class="lang-js prettyprint-override"><code>displayFn(entityId: number): string {
    const name = (entityId &amp;&amp; entityId &gt; 0) ? this.entityNames?.find(entityName =&gt; entityName.EntityId === entityId).EntityName : '';
    return name;
  }
  </code></pre>
  <p>The problem is, my component &quot;this.&quot; is not available and any access to its members fails.</p>