title: datas not showing in tables when change occurs, angular
body: <p>I've got a problem that is linked to my <code>*ngIf</code>. I've got two buttons displaying different data in the same table. I'm filtering an array of object. The problem is that if I click on one of this button like &quot;Dog&quot; the correct data is displayed but after if I click on &quot;cat&quot; the columns will be empty. Does anyone know what I'm doing wrong ?</p>
  <p>animal.ts</p>
  <pre><code>  cat: boolean;
    dog: boolean;
  
    animals: Animal[] = [
      {type: 'cat', name: 'snoopy', color: 'white'},
      {type: 'dog', name: 'spooch', color: 'black'}
    ];
  
  chooseCat() {
      this.cat = true;
      this.dog = false;
  
      this.animals = this.animals.filter(d =&gt; {
        return d.type === 'cat'
      });
  }
  
  chooseDog() {
      this.cat = false;
      this.dog = true;
  
      this.animals = this.animals.filter(d =&gt; {
        return d.type === 'dog'
      });
  }
  
  </code></pre>
  <p>animal.html</p>
  <pre><code> &lt;div class=&quot;col-xs-12&quot; class=&quot;icon&quot; (click)=&quot;chooseCat()&quot;&gt;
        &lt;img src=&quot;../assets/img/cat.png&quot; class=&quot;icon;&quot;&gt;
        cat
   &lt;/div&gt;
  
   &lt;div class=&quot;col-xs-12&quot; class=&quot;icon&quot; (click)=&quot;chooseDog()&quot;&gt;
        &lt;img src=&quot;../assets/img/dog.png&quot; class=&quot;icon;&quot;&gt;
        dog
   &lt;/div&gt;
  
  
  &lt;table *ngIf=&quot;cat || dog&quot;&gt;
  &lt;tr&gt;
  &lt;td&gt;name&lt;/td&gt;
  &lt;td&gt;color&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr *ngFor=&quot;let a of animals&quot;&gt;
  &lt;td&gt;{{a.name}}&lt;/td&gt;
  &lt;td&gt;{{a.color}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  </code></pre>