CSS-in-JS for Angular

Why CSS-in-JS?

Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!
~ Max Stoiber

I am highly recommended developer who have a plan to use CSS-in-JS to read Max Stoiber article. The points stated in the article is applicable for all frameworks (not only React).

Me and CSS-in-JS

To be honest, I am not great at CSS and facing a lots of challenges to design the architecture or organisation for my CSS's. How I survived in my works is by dividing the works into scripting and styling. I do most on the scripting and lets my colleagues in-charge on CSS/SaSS part.

"i found a light in the dark" when I heard about CSS modules. However I am struggling to integrate the tool with Angular environment and I give up with CSS modules.

When I moved to new company this year, the company stack is React and Styled-Components. This is when I really "found a light in the dark".

Styled-Components

styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles. However styled-components do not have a support for Angular. But don't worry, we can use other CSS-in-JS tool called emotionJS.

emotionJS

emotionJS is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. emotionJS is framework agnostic.

adding emotionJS into our Angular project

no babel and no webpack config required, its just one single command

npm i emotion
~~~

and use it in JavaScript/TypeScript by import its core function <b>css</b>

~~~javascript
import { css } from "emotion"
~~~

here is sample emotionJS in vanilla JavaScript

![](https://thepracticaldev.s3.amazonaws.com/i/k7r0s1euiu4n19aruucw.png)

### emotionJS with Angular

>It is not until you rhyme with a person that makes you their perfect match, it is when you are satisfied with each others peculiarities, and find jewels in their loopholes.
~ Michael Bassey Johnson

CSS-in-JS is not popular in Angular community and this might be because Angular already have solid styling mechanism and shadow DOM encapsulated your styling to not affecting others while block from side-effects from outside. You can refer this article by [Ashnita Bali](https://ultimatecourses.com/blog/using-ngstyle-in-angular-for-dynamic-styling?fbclid=IwAR3nZH-_CSazBMOprkeXD7uUVtkNpusr0OU7CeJFPWjUzBurwlqDdQs4eJM). However for those who are more comfortable in JavaScript land might like to try styling alternative like CSS-in-JS. 

In this article, we will go thru step by step to applying style based on @Input properties

### step 1 - define component variants (@Input()) 

![](https://thepracticaldev.s3.amazonaws.com/i/njj0iphgd246uh7ntaji.png)

### step 2 - provide default value for all the variants

![](https://thepracticaldev.s3.amazonaws.com/i/o9aabvoznkthhfmrc3vt.png)

### step 3 - listen to the change of the variants and apply styling dynamically

![](https://thepracticaldev.s3.amazonaws.com/i/211jele5qvcerh8a87yr.png)

![](https://thepracticaldev.s3.amazonaws.com/i/okp1iownqu6vv3mlm0d4.png)

- getDynamicStyle method check the variant and assign the styling based on the state of the variant
- its easy to styling your component using component state

here is the [gist](https://gist.github.com/abumuawiyah/6ac9272fc3a5c95e21c915900846042f) for complete script.