angular-host-css-variable

    0.1100.4 • Public • Published

    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

    1. 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.

    Keywords

    Install

    npm i angular-host-css-variable

    DownloadsWeekly Downloads

    3

    Version

    0.1100.4

    License

    MIT

    Unpacked Size

    28.4 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar