title: Angular - Hide a table row in ngFor if it meets condition
body: <p>I have an angular app that is rendering a table of employee details. There is a datapoint called <code>Optional</code> that determines if it should show up by default.</p>
  
  <p>My goal here is to hide these rows by default and then be able to toggle them on/off with a click of a button.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;table class="table table-condensed table-striped" *ngIf="s.fields"&gt;
     &lt;tbody&gt;
        &lt;tr *ngFor="let f of s.fields.field" [class.hidden]="f.Optional == 1"&gt;
          &lt;td&gt;{{ f.FieldTitle }}&lt;/td&gt;
          &lt;td&gt;{{ f.Value }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So far, I have it hiding the rows correctly that are optional by adding a class to them.</p>
  
  <p>I ultimately need to be able to click a button to show/hide these hidden rows but I am unsure how to go about this approach.</p>
  
  <p>Do I use CSS for this or somehow create a 2-way binding or model for it?</p>