title: Trying to use async pipe with ngFor to fetch data and display dynamically angular 6
body: <p>In angular 6 application, I am using the "ng-select" <a href="https://github.com/ng-select/ng-select#getting-started" rel="nofollow noreferrer">https://github.com/ng-select/ng-select#getting-started</a> select box and firing the "change" event to retrieve data from an API method and assign them to an observable, then using the async pipe in my html to listen to an array property of this observable and display it in a table, although I am retrieving the data at the table, but at some instant it throws an error because the property evaluates to "null",</p>
  
  <pre><code>AgentBranchAssignmentComponent.html:72 ERROR TypeError: Cannot read property 'users' of null
      at Object.eval [as updateDirectives] (AgentBranchAssignmentComponent.html:72)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
      at checkAndUpdateView (core.js:10451)
      at callViewAction (core.js:10692)
      at execEmbeddedViewsAction (core.js:10655)
      at checkAndUpdateView (core.js:10452)
      at callViewAction (core.js:10692)
      at execComponentViewsAction (core.js:10634)
      at checkAndUpdateView (core.js:10457)
      at callViewAction (core.js:10692)
  </code></pre>
  
  <p>so please advise:
  1) why this error is happening, and how to avoid it?
  2) is this the best solution for such scenario?
  3) how do I clear the table if i clear the selection?</p>
  
  <p>this is the and the table with the ngFor "ng-select" configuration in html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-select
   (change)="getAgentsForBranch($event)"
   [items]="branches"&gt;
  &lt;/ng-select&gt; 
  
  &lt;tbody *ngIf="userPage &amp;&amp; (userPage | async).users"&gt;
   &lt;tr *ngFor="let u of (userPage | async).users"&gt;
   &lt;td&gt;{{u.firstName + " " + u.lastName}}&lt;/td&gt;
   &lt;td&gt;{{branchName}}&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>and here is the ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>userPage: Observable&lt;AllUserListPage&gt;;
  
  getAgentsForBranch(event) {
      if(!event){
       // here i am clearing the selction and want to clear data in the table also
        this.branchName= '';
        return;
      }
      const branchId = event.branchId;
      this.branchName = event.name;
      this.userPage = this.obexService.getUsersForBranch(branchId, 0, 50, 'OLDEST', true)
  }                  
  </code></pre>