NgxDynamicCss
Angular 5 directive used to apply styles to html element using javascript object dynamically.
Download:
NPM: https://www.npmjs.com/package/ngx-dynamic-css Github: https://github.com/kgrvr/ngx-dynamic-css
Usage:
HTML Template:
<h2 [ngCss]='ngCss'>This is h2 tag</h2>
Typescript:
ngCss: NgCssModel = {
apply: true,
css: {
'color': 'red',
'font-size': '50px'
}
};
Or you can pass an array to it too: Typescript:
ngCssSingle: NgCssModel = {
apply: true,
css: {
'text-align': 'left',
}
};
ngCss: NgCssModel[] = [
{
apply: true,
css: {
'color': 'red',
}
},
{
apply: true,
css: {
'font-size': '50px',
}
}
];
HTML template:
<h1 [ngCss]='ngCssSingle'>
Welcome to NgxDynamicCss!
</h1>
<h2 [ngCss]='ngCss'>This is h2 tag</h2>
Properties:
-
apply
= Whether to apply CSS properties or not- Type:
Boolean
- Type:
-
css
= Actual CSS properties in Key Value format- Type:
{ 'key': 'value' }
- Type:
Build:
Run "npm run packager" to package directive to dist folder.
ToDo:
- Change detection to detect changes in key value pair.
- Change the way it apply styles to setAttribute.
- Update docs.
Follow me on Github:
Kush Grover: https://github.com/kgrvr
Feel free to request for Pull Request. Collaborate and build! :)