0.1.2 • Published 6 years ago
ngx-dynamic-css v0.1.2
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
css
= Actual CSS properties in Key Value format - Type:{ 'key': 'value' }
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! :)