kit-class

README

Apply classes to an element.

Why

  1. Default Angular bindings ([class.x] and [ngClass]) do not allow to bind dynamic class-names based on boolean/string values.

  2. @HostBinding can not provide ngClass functionality, if we want to bind classes from component.

API

[class] KitClassDirective

@Directive

Selector:'[kitClass]'

Provides KitClassService and pass input value to KitClassService.apply method.

Usage

<div [kitClass]="{color: 'red', active: true, primary: false}">
<!--<div class="color-red active">-->

Members

SignatureDescription
@Input() kitClass: KitClassSetter

[class] KitClassModule

@NgModule

Exports:[ KitClassDirective, ]

[class] KitClassService

@Injectable

Apply classes to an element.

Must be provided on a component or directive.

Usage

constructor(private kitClass: KitClassService) {}
...
this.kitClass.apply({color: 'red', active: true, primary: false});

Adds to element: class="color-red active"

Example

Members

SignatureDescription
set state(setterRaw: KitClassSetter)

Override class declaration state.

apply(setter: KitClassSetter): void

Merge to class declaration state.

[interface] KitClassSetter

Members

SignatureDescription
(key: string): KitClassValue