Angular Host CSS Variable

This package enable to use host-scoped css variable by hvar(--name) in Angular.

DEMO

Stackblitz Demo

Support

Angular 11++

Install

$ ng add angular-host-css-variable

Usage Example

1. Create components

$ ng g c components/child
CREATE src/app/components/child/child.component.scss (0 bytes)
CREATE src/app/components/child/child.component.html (20 bytes)
CREATE src/app/components/child/child.component.spec.ts (619 bytes)
CREATE src/app/components/child/child.component.ts (272 bytes)
CREATE src/app/components/child/child.Component.scss (47 bytes)
UPDATE src/app/app.module.ts (403 bytes)

$ ng g c components/parent
CREATE src/app/components/parent/parent.component.scss (0 bytes)
CREATE src/app/components/parent/parent.component.html (21 bytes)
CREATE src/app/components/parent/parent.component.spec.ts (626 bytes)
CREATE src/app/components/parent/parent.component.ts (276 bytes)
CREATE src/app/components/parent/parent.Component.scss (48 bytes)
UPDATE src/app/app.module.ts (496 bytes)

App Component => Parent Component => Child Component

2. Edit each component scss

child.component.scss

@import "~host-css-variable/host-variable";
$host: host("child");

:host {
  @include hvar(--width, 100%);
  @include hvar(--height, 100%);
  @include hvar(--side-padding, 8px);
}

:host {
  display: block;
  width: calc(hvar(--width) - hvar(--side-padding) * 2);
  height: hvar(--height);
  padding: 0 hvar(--side-padding);

  outline: skyblue solid 1px;

  div {
    width: calc(hvar(--width) - hvar(--side-padding) * 2);
    height: calc(hvar(--height) - 32px);
    outline: skyblue solid 1px;
  }
}

parent.component.scss

@import "~host-css-variable/host-variable";
$host: host("parent");

:host {
  @include hvar(--width, 100%);
  @include hvar(--height, 100vh);
  @include hvar(--side-padding, 16px);
}

:host {
  display: block;
  width: calc(hvar(--width) - hvar(--side-padding) * 2);
  height: hvar(--height);
  padding: 0 hvar(--side-padding);
  outline: skyblue solid 1px;

  app-child {
    --width: calc(hvar(--width) - hvar(--side-padding) * 2);
    --height: calc(hvar(--height) - 32px);
    --side-padding: 16px;
  }
}

app.component.scss

@import "~host-css-variable/host-variable";
$host: host("app");

:host {
  @include hvar(--width, 100vw);
  @include hvar(--height, 100vh);
}

:host {
  display: block;
  width: hvar(--width);
  outline: skyblue solid 1px;

  app-parent {
    --width: hvar(--width);
    --height: calc(hvar(--height) - 32px);
    --side-padding: 32px;
  }
}

In this case, each component's --side-padding is following.

components	--side-width(overrited)	--side-width(default)
parent	32px	16px
child	16px	8px

If you want to know more detail, access to Stackblitz Demo.