Quick context

about

host-context()

Hi!

(uh nk - ee t ah)

I'm Ankita

@GuacamoleAnkita

Austin, Texas

Shadow Dom Tree Structure

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Using :host-context() to modify child based on parent


:host-context(.row) {
  .mat-card-content {
    display: none;
  }
}

<section [class]="group.value" class="dashboard-content">
  <tour-of-heroes-card
  *ngFor="let hero of heroes$ | async"
  [hero]="hero"></tour-of-heroes-card>
</section>

Using :host-context() to theme a component

:host {
  @include mat.elevation(2);
  .
  background-color: $container-basic--bg-color;
}

:host-context(.dark-theme) {
  @include mat.elevation(8);
  background-color: $dark-container-basic--bg-color;
}

Fin.

Github repo

Slides