title: Toggling the visibility of div class with Angular
body: <p>I am trying to change the visibility of a CSS class .handle to 'hidden' after a button has been clicked. I tried to just insert a modified class by doing [ngClass]="'handle.hidden'" after the button has been toggled but this didn't work.</p>
  
  <p>HTML File</p>
  
  <pre><code>&lt;div class="expand-collapse"&gt;
   &lt;button class="button-text title-text" (click)="toggleButton()"&gt;
    &lt;span class="minimize"&gt;&lt;/span&gt;
  ---&gt; &lt;div [ngClass]="'handle.hidden'"&gt;&lt;/div&gt;
   &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS File</p>
  
  <pre><code>.handle {
      height: 25px !important;
      position: relative;
  }
  
  .handle.hidden {
      visibility: hidden;
  }
  
  .handle.visible {
      visibility: visible;
  }
  </code></pre>