title: Angular: How to add a class to a nested element of a child component
body: <p>I have a component that is an input + a dropdown list <code>DropdownSelect</code>, how can I add a class to an element nested in the dropdown list component?</p>
  
  <p><strong>Input + Dropdown HTML</strong></p>
  
  <pre><code>&lt;input class="number-input"
         #input
         [(ngModel)]="value.input"
         (ngModelChange)="onInputChange($event)"
         (blur)="onInputBlur()"&gt;
  &lt;app-dropdown-select [dropdownItems]="dropdownItems"
                       [(selectedItem)]="value.dropdownItem"
                       (selectedItemChange)="onDropdownChange($event)"
                       combinedInput="true"
                       class="dropdown-btn"&gt;
  &lt;/app-dropdown-select&gt;
  </code></pre>
  
  <p><strong>DropdownSelect component:</strong></p>
  
  <pre><code>&lt;div class="button-container"&gt;
    &lt;div class="dropdown-button"
         (click)="onClick($event)"
         [class.dropdown-active]="showList &amp;&amp; !combinedInput"
         [class.dropdown-input-active]="showList &amp;&amp; combinedInput"&gt;
      &lt;div class="downdown-selected-item"&gt;
        {{selectedItem?.name}} {{selectedItem?.unit}}
      &lt;/div&gt;
      &lt;span class="spacer"&gt;&lt;/span&gt;
      &lt;i class="material-icons"&gt;
        {{buttonIcon}}
      &lt;/i&gt;
    &lt;/div&gt;
  
    &lt;div class="dropdown-items" *ngIf="showList"&gt;
      &lt;div *ngFor="let item of dropdownItems"
           (click)="onClickItem(item)"
           class="dropdown-item"&gt;
        {{item.name}},
        {{item.description}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to add class <code>invalid</code> to the element with class <code>dropdown-button</code></p>
  
  <p>I've managed to add class to the component, don't know how to add to inner element.</p>
  
  <pre><code>@ViewChild(DropdownSelectComponent, { read: ElementRef }) dropdownSelectComponent: ElementRef;
  </code></pre>
  
  <p><strong>add class:</strong></p>
  
  <pre><code>this.dropdownSelectComponent.nativeElement.classList.add('invalid');
  </code></pre>