All the Ways to Add CSS

to Angular 2 Components

Using Component Styles

Special selectors

:host pseudo-class

Special selectors

:host-context pseudo-class

Special selectors

/deep/

Loading Styles into Components

•inline in the template HTML•by setting styles•by setting styleUrls metadata•with CSS imports

Styles in Metadata

Template Inline Styles

Style URLs in Metadata

Template Link Tags

CSS @imports

In this case the URL is relative to the CSS fileinto which we are importing.

Controlling View Encapsulation Modes for Components

• None: All elements are spit out - no Shadow DOM at all.

• Emulated: This actually tries to emulate Shadow DOM to give us the

feel that we are scoping our styles. This is not a real Shadow DOM

but a strategy to make all browsers smile at our code.

• Native: This is the real deal as shadow DOM is completely

enabled. Older browsers can go to hell.

Controlling View Encapsulation Modes Usage

What the Heck is Shadow DOM?

Shadow DOM Browser Support

Demo

Resources

• Angular 2's Fresh Approach to Style -Justin Schwartzenberger -https://goo.gl/HQOCq8

• Animations - Matias Niemela -https://goo.gl/SQ1jdr

• Component styles -https://goo.gl/YKUcNY

• Angular 2 fundamentals -https://goo.gl/mFJyRc

Conclusion

Thank you guys!