Angular: Как добавить класс во вложенный элемент дочернего компонента

Question

У меня есть компонент, который является входом + раскрывающийся список DropdownSelect, как я могу добавить класс к элементу, вложенному в компонент раскрывающегося списка?

Ввод + раскрывающийся список HTML

<input class="number-input"
       #input
       [(ngModel)]="value.input"
       (ngModelChange)="onInputChange($event)"
       (blur)="onInputBlur()">
<app-dropdown-select [dropdownItems]="dropdownItems"
                     [(selectedItem)]="value.dropdownItem"
                     (selectedItemChange)="onDropdownChange($event)"
                     combinedInput="true"
                     class="dropdown-btn">
</app-dropdown-select>

DropdownSelect component:

<div class="button-container">
  <div class="dropdown-button"
       (click)="onClick($event)"
       [class.dropdown-active]="showList && !combinedInput"
       [class.dropdown-input-active]="showList && combinedInput">
    <div class="downdown-selected-item">
      {{selectedItem?.name}} {{selectedItem?.unit}}
    </div>
    <span class="spacer"></span>
    <i class="material-icons">
      {{buttonIcon}}
    </i>
  </div>

  <div class="dropdown-items" *ngIf="showList">
    <div *ngFor="let item of dropdownItems"
         (click)="onClickItem(item)"
         class="dropdown-item">
      {{item.name}},
      {{item.description}}
    </div>
  </div>
</div>

Я хочу добавить класс invalid к элементу с классом dropdown-button

Мне удалось добавить класс к компоненту, не знаю, как добавить к внутреннему элементу.

@ViewChild(DropdownSelectComponent, { read: ElementRef }) dropdownSelectComponent: ElementRef;

добавить класс:

this.dropdownSelectComponent.nativeElement.classList.add('invalid');

Answer 1

Есть несколько способов добиться этого, и я объясню один из них ниже.

Если вы хотите условно применить недопустимый класс из внешнего компонента, то вы можете сделать это, добавив дополнительный* Переменная @Input() в файле compnents.ts для передачи в ваш компонент, которая будет выглядеть следующим образом:

<input class="number-input"
       #input
       [(ngModel)]="value.input"
       (ngModelChange)="onInputChange($event)"
       (blur)="onInputBlur()">
<app-dropdown-select [dropdownItems]="dropdownItems"
                     [(selectedItem)]="value.dropdownItem"
                     (selectedItemChange)="onDropdownChange($event)"
                     combinedInput="true"
                     [invalidInput]="{{condition}}"
                     class="dropdown-btn">
</app-dropdown-select>

Затем внутри самого компонента вы можете добавить привязку [ngClass], чтобы внутренний компонентв конечном итоге выглядит так:

...
<div class="dropdown-button"
       (click)="onClick($event)"
       [class.dropdown-active]="showList && !combinedInput"
       [class.dropdown-input-active]="showList && combinedInput"
       [ngClass]="{'invalid': invalidInput}">
    <div class="downdown-selected-item">
      {{selectedItem?.name}} {{selectedItem?.unit}}
    </div>
    <span class="spacer"></span>
    <i class="material-icons">
      {{buttonIcon}}
    </i>
...

Подробнее об угловом креплении ngClass можно найти здесь https://angular.io/api/common/NgClass