title: Add classes to child elements when clicking on parent element
body: <p>What's expected:
  When a user clicks on a button, classes are added/remove from <strong>both</strong> the parent element and some child elements (in order to expand/collapse a text entry box)</p>
  
  <p>What I've tried:
  I've tried using *ngIf on the parent element, along with a button that's tied to a click event which toggles the visibility of the parent div. When the button is clicked, the parent div (and hence all the child elements) are removed from the DOM. When it's clicked again, everything is added back to the DOM. This works, but it's not what it doesn't function well design-wise.</p>
  
  <p>I'd like a way to tie [ngClass] to a button click, which will somehow add/remove classes to the parent element and to its child elements. In my code below, I'm just using a click event, [ngClass], and a separate button that's tied to that click event. It sort of works, but not entirely because that button isn't tied to [ngClass], and clicking anywhere in the box causes the class to be added which results in the text box collapsing when it shouldn't -- the button itself only "works" because it's positioned within the 'flex-full-layout section-white-background' div. The text box should only expand/collapse when the button is slicked. I'd like to be able to add/remove classes from both the parent and child elements by clicking that single button</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="layout-column flex-full-layout flex-50 column-one"&gt;
      &lt;button (click)="showHide()" id="btToggle" class="btn btn-info btn-sm ToggleVisibility" &gt;{{buttonName}}&lt;/button&gt;
      &lt;div class="flex-full-layout section-white-background (click)="showHide()" [ngClass]="status ? 'open' : 'closed'"&gt; 
        &lt;fieldset class="no-bottom-padding"&gt;
          &lt;legend class="ce-patient-legend-style"&gt;Insurance&lt;/legend&gt;
          ## unneeded stuff
        &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>TS:</p>
  
  <pre><code>  status: boolean = false;
    buttonName : any = '-';
  
    showHide(){
      this.status = !this.status;  
  
  if(this.status) 
    this.buttonName = "+";
  else
    this.buttonName = "-"
    }
  </code></pre>
  
  <p>'Open' and 'closed' are the classes that are being set in [ngClass]. I then set CSS for both of those classes, and that CSS is applied based upon which class is active</p>
  
  <p>CSS:</p>
  
  <pre><code>.open {
    height: 17px;
  }
  
  .closed {
    height: 100%;
  }
  </code></pre>
  
  <p>Clicking on the 'ToggleVisibility' button should add/remove classes from both the parent 'flex-full-layout section-white-background' element and its child elements</p>