Angular Inline component css


Angular does provide support for inline css, probably not 100% as provided by specialized library like emotionjs or styled-components.

But essentially Angular does it throught ViewEncapsulation.  4 options supported which are :-

a) None - Css are placed in head section like normal css.





b) Native - Depending on your browser support, it tries to use ShadowDom if it can.





c) ShadowDom - uses browser shadow dom for component rendering.





d) Emulated - Css are placed in head section (and the names are awkward) and only accessible by component query selector.

How do you do it?


import { Component, ViewEncapsulation } from '@angular/core';

This is how you configure it on your angular components.





Pretty straight-forward. :)



Comments

Post a Comment

Popular posts from this blog

The specified initialization vector (IV) does not match the block size for this algorithm

Image
If you're getting  exception when trying to assigned key to a symmetric key and getting error message below :- The specified initialization vector (IV) does not match the block size for this algorithm And your code probably look like something below :- Then you need to go into debug mode and start looking into the supported size for IV as shown in diagram below :- As you can see, IV is 16 bytes, so you need to provide 16 bytes. The same goes for Key field too, if you're adding anything to it. As long as you provide a valid key size, then we're good and you're code will be ready.
Read more