Angular. Стилизация host элемента

Имеется HelloComponent компонент:

@Component({
  selector: 'hello',
  template: `<div class="wrap">Hello {{name}}!</div>`,
  styleUrls: ['hello.component.css'],
})
export class HelloComponent  {
  @Input() name: string = 'Angular';
}

При его размещении в приложении (<hello></hello>) разметка будет выглядеть следующим образом:

<hello>
    <div class="wrap">Hello Angular!</div>
</hello>

Чтобы стилизовать сам <hello> (хост), в котором размещается содержимое компонента, применяются специальные селекторы из мира shadow DOM.

:host

Cелектор псевдокласса :host стилизует хост компонент.

:host {
  display: block;
  background-color: lightcoral;
}

Селектор :host является единственным способом стилизовать хост т.к. он не является частью собственного шаблона компонента. Элемент host находится в шаблоне родительского компонента.

:host(selector)

Для установки стилей хост компоненту при наличии на нём определённого класса используется функциональная форма с круглыми скобками :host(selector).

Следующий стиль будет применён к хост компоненту, если на компонент повесить класс active например через @HostBinding т.е. <hello class="active"></hello>

:host(.active) {
  font-weight: bold;
  font-size: 24px;
}

:host-context(selector)

Для установки стилей зависящих от каскада родительских элементов применяется форма :host-context(selector)

Следующий стиль будет применён к хост компоненту, если он размещен внутри <aside> элемента (<aside><hello></hello></aside>).

:host-context(aside) {
  text-align: right;
  background-color: lightblue;
}

Пример использования

Похожие записи

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне <ng-template>, использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

Angular. Manually retry http request

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.