Angular guid
Dynamic style in Angular
Change style when you want
Angular give us a great ability to create content dynamically. Everybody know about “if”, “switch” or “for” they are our best friend in every Angular project, but Angular have a lot more useful tools for development.
Angular ngStyle helps to create dynamic style. Let’s take a closer look.
We need to create a couple objects with specific color and width. All those stuff we need to create dynamically. We could use “if” statement, but if you have a couple property we need to check a lot of stuff and we will write a lot of “if” statement. Angular have better solution.
On the right side you see properties which we need generate dynamically. On the left side you see Angular code. We have a couple options how we can set those properties, but result will be the same.
Also we can change one of the properties dynamically and html code will rebuilt it.
This buttons can change height of our elements. That give our users ability to change something and see the results immediately.
Also we could do the same with style classes and we can use conditions to decide what style we must use and we could change all those stuff dynamically.
Angular give us another option how we can use class.
Angular give us a lot of opportunities for creation code and styles dynamically. In this short example we covered different options how we could create dynamical styles.
Originally published at tomorrowmeannever.wordpress.com on March 21, 2019.
