title: optional chaining in Angular Template
body: <pre><code>Compiled with problems:X
  ERROR
  src/app/components/users/users.component.html:2:22 - error TS2532: Object is possibly 'undefined'. 
  
  2 &lt;ul *ngIf=&quot;loaded &amp;&amp; users?.length &gt; 0&quot;&gt;
                         ~~~~~~~~~~~~~~~~~
    src/app/components/users/users.component.ts:6:16
      6   templateUrl: './users.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component UsersComponent.
  </code></pre>
  <p>This is my error. I have been looking around whithout much luck. My experience with angular or typescript is very limited. I am actualy following a udemy course. This is the first time I am encountering &quot;Optional Chaining&quot; so I might be overlooking something obvious.</p>
  <p>The code that produces the issue is fairly simple</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Users&lt;/h2&gt;
  &lt;ul *ngIf=&quot;loaded &amp;&amp; users?.length &gt; 0&quot;&gt;
    &lt;li *ngFor=&quot;let user of users&quot;&gt;
      &lt;h3&gt;{{ user.firstName }} {{ user.lastName }}&lt;/h3&gt;
      &lt;ul *ngIf=&quot;showExtended&quot;&gt;
        &lt;li&gt;age: {{ user.age }}&lt;/li&gt;
        &lt;li&gt;Address: {{ user.address.street }} {{ user.address.city }} {{ user.address.state }}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>The component.ts just provides a users[] But the coarse was trying to explain some sort of loading animation. Thats why the users[] sometimes is not loaded from the start.</p>
  <p>Any help is appreciated.</p>