Блог

Мне было интересно, как изменить стиль моего компонента с помощью углового @Input() декоратора.

Причина этого была в том, что я не мог ни

1. Измените css, @ViewChild потому что это не было инициализировано в ngOnInit()
2. передайте его [style] по какой-то причине, которую я не могу объяснить

Я уже дам свое решение, но если у кого-то есть лучшее, я открыт 🙂

Что мне нужно было сделать, так это.

1. передайте переменную от родителя к потомку

parent.component.html

 <child-component css="background-color: black;"></child-component>
 

2. Измените css с помощью @HostBinding

дочерний компонент.ts

 @Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponentComponent {
  @HostBinding('style')
  style: string

  @Input() set css(value: string) {
    this.style = value || ''
  }
}