Skip to content

Instantly share code, notes, and snippets.

@sulco
Created November 4, 2018 16:12
Show Gist options
  • Save sulco/6860711bd1f7d72344f317118a28ff4f to your computer and use it in GitHub Desktop.
Save sulco/6860711bd1f7d72344f317118a28ff4f to your computer and use it in GitHub Desktop.
Angular theme directive
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
/**
* Usage:
* <mycomponent [dtTheme]="{'color-main': '#bada55'}"></mycomponent>
*/
@Directive({
selector: '[dtTheme]'
})
export class ThemeDirective implements OnChanges {
@Input('dtTheme') theme: {[prop: string]: string};
constructor(private el: ElementRef<HTMLElement>) {
}
ngOnChanges() {
Object.keys(this.theme).forEach(prop => {
this.el.nativeElement.style.setProperty(`--${prop}`, this.theme[prop]);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment