title: how to change css class dynamically with angular
body: <p>I am using bootstrap4 navs with a form
  I am trying to change the css class to display: none; for every tab that is not selected
  I have tried to make this happen by using ngClass but didn't work
  <a href="http://%20https://stackblitz.com/edit/angular-szkxtx" rel="nofollow noreferrer">stackblitz  demo</a> </p>
  
  <pre><code>  &lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" id="itemSummary-tab" data-toggle="tab" href="#itemSummary" role="tab" aria-controls="itemSummary" aria-selected="true"&gt;Item Summary&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false"&gt;Details&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" id="measurement-tab" data-toggle="tab" href="#measurement" role="tab" aria-controls="measurement" aria-selected="false"&gt;Measurement&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
       &lt;div class="tab-pane fade show active" ngClass="!active? display:none" id="itemSummary" role="tabpanel" aria-labelledby="itemSummary-tab"&gt; 
      ....
      &lt;/div&gt;
    &lt;div class="tab-pane fade" id="measurement" ngClass="!active? display:none" role="tabpanel" aria-labelledby="measurement-tab"&gt;
  ...
  &lt;/div&gt;
    &lt;div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab"&gt;
  ...
  &lt;/div&gt;
  </code></pre>