:host-context

Chcemy style w zależności od klasy rodzica, czyli na przykład strona ma przełączniki do kolorystyki. Na głównym div dodajemy klasę, która odpowiada wersji strony i oddziałuje na znajdujące się w nim komponenty poprzez nadanie właściwych styli. Jak?
Załóżmy, że div dostał klasę .theme-dark. Wtedy w konkretnym komponencie dodajemy :host-context(.theme-dark) {…..} i stylujemy tak, jak powinien wyglądać komponent dla tego przełącznika.

:host

Inna sytuacja. Chcemy, aby dookoła elementów w naszym komponencie znajdowała się ramka. Nie dodajemy żadnego dodatkowego znacznika div okalającego pozostałe znaczniki. Wystarczy w css użyć :host {}, który pozwala na ostylowanie host’a komponentu. Co to ten host? Każdy wyrenderowany komponent jest obudowywany znacznikiem zgodnym z nazwą komponentu, to właśnie host. Taki host komponentu zawsze zawiera unikalny atrybut _ng-host-c…, gdzie kropki odpowiadają kolejności przetwarzania komponentów na stronie (w poniższym przykładzie _nghost-c12).

::ng-deep

A jak wpływamy na style dziecka komponentu? Z pomocą ::ng-deep {}. Wtedy możemy nadać specjalny kolor fonta dla danego komponentu, ale tylko wtedy gry jest dzieckiem stylowanego przez nas elementu.

Author: