Как применить условное CSS к полю ввода дочернего компонента в Angular 5?

Question

Я сталкиваюсь с проблемами, пытающимися стилизовать цвет фона автозаполнения дочернего компонента динамически, основываясь на булевом условии.

В моем родительском компоненте есть компонент поиска, который содержит поле автозаполнения Angular Material:

<search (notify)="onSearch($event, i)" searchType="Product" 
    [(value)]="repair.product" 
    [ngClass]="{'error-color': repair.invalidProduct}"></search>

И в scss моего родительского компонента у меня есть этот класс:

:host ::ng-deep search.input .error-color {
  background-color: rgba(255, 255, 0, 0.48);
}

Есть ли способ сделать это?

Answer 1

Попробуйте:

search.error-color ::ng-deep  input {
  background-color: rgba(255, 255, 0, 0.48);
}

Или нет стилей инкапсуляции в компоненте

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

Answer 2

вы можете передать логическое значение от родительского компонента к дочернему компоненту, используя привязку свойства - @input (), и использовать его внутри дочернего компонента.

так у вашего родителя:

<search [isInvalid]="repair.invalidProduct"></search>

и внутри дочернего компонента (поиск):

search.component.TS:

@Input() isInvalid = false;

search.component.HTML:

<input [ngClass]="{'error-color': isInvalid}" />

search.component.CSS:

.error-color { background-color: red }