CSS-in-JS for Angular
Tags: angular, cssinjs, angularstyle
Published: 2019-07-21 16:46:50

---
title: CSS-in-JS for Angular
published: true
description: 
tags: angular, cssinjs, angularstyle
---

## 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](https://mxstbr.com/thoughts/css-in-js/). 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](https:// styled-components.com) 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 <b>emotionJS</b>. 

### 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 <b>one single command</b>

~~~cmd
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.