license import { Directive , DoCheck , ElementRef , Input , KeyValueChangeRecord , KeyValueDiffer , KeyValueDiffers , Renderer } from '@angular/core' ; ngModule whatItDoes howToUse description stable @ Directive ( { selector : '[ngStyleCustom]' } ) export class NgStyle implements DoCheck { private _ngStyle : { [ key ] : string ; } ; private _differ : KeyValueDiffer < any , any > ; constructor ( private _differs , private _ngEl , private _renderer ) { } @ Input ( ) set ngStyle ( v ) { this . _ngStyle = v ; if ( ! this . _differ && v ) { this . _differ = this . _differs . find ( v ) . create ( null ) ; } } ngDoCheck ( ) { if ( this . _differ ) { const changes = this . _differ . diff ( this . _ngStyle ) ; if ( changes ) { this . _applyChanges ( changes ) ; } } } private _applyChanges ( changes ) { changes . forEachRemovedItem ( ( record ) => this . _setStyle ( record . key , null ) ) ; changes . forEachAddedItem ( ( record ) => this . _setStyle ( record . key , record . currentValue ) ) ; changes . forEachChangedItem ( ( record ) => this . _setStyle ( record . key , record . currentValue ) ) ; } private _setStyle ( nameAndUnit , value ) { const [ name , unit ] = nameAndUnit . split ( '.' ) ; value = value && unit ? `${ value }${ unit }` : value ; this . _renderer . setElementStyle ( this . _ngEl . nativeElement , name , value ) ; } }