Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 827 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Use Global CSS Inside Angular 2 Components

1:46 Angular 2 lesson by

Global CSS and stylesheets are also available to Angular 2 Components even though the styles you define inline will remain isolated to the Component itself. You can customize this behavior using ViewEncapsulation if you need to keep global styles out of your Components.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.

Avatar
Nicholas

If you use try to use encapsulation: ViewEncapsulation.Native in Safari you will get a shadow dom error and would need to include a polyfill as a work around. On Chrome the example works as shown as you are using the native shadow DOM which is only available in Chrome.

Avatar
Greg

I'm wondering about this as well. I would think polyfils would make it work the same regardless of browser support? Otherwise why use Native at all?

I cannot run any beta examples - here or anywhere else - in ie to test this out. I read that you need to load the ie shim, but when I add a script tag for it ie still fails with errors in the vendor.bundle.js. Any other tips on how to get angular beta running in IE?

In reply to Nicholas
Avatar
Greg

I ran the example in firefox. It breaks in Native mode (no console error) unless you go to about:config to enable webcomponents. It is then working the same as in chrome, though i see an inline style tag inside each todo renderer for the strikethrough style, and no shadow-root. Perhaps the developer tool simply doesn't display shadow root properly? And sorry, that still leaves the question, what is the expected behavior?

In reply to Greg

When you add a style sheet to your project -- I'll just add tachyons in here and hit save -- you'll notice that those styles will apply to everything in your project. That's the expected behavior. I can actually go into my components and for example on my button I could say I want to use the classes from this library of white text on a background of bg-black with the code font.

simple-form.component.ts

<button
  class="white bg-black code"
  (click)="update.emit({text:message})">Click me!</button>

When I hit save, you'll see that it grabs all of those. It made this white. It made the background black. It's using a different font now. It's using all of that from that library that I passed in.

Button styles

While my styles that I defined in here have not leaked out to my project, styles that I pass in globally are available inside of my components. You can stop that behavior by defining encapsulation inside your project. If I say encapsulation: ViewEncapsulation.Native. Make sure to import that.

simple-form.component.ts

@Component({
  encapsulation: ViewEncapsulation.Native,
  selector: 'app-simple-form',
  template: ` ... `,
  styles: [ ... ]
})

Then when I hit save, I'm going to lose those styles. You'll see that my components are back to the way they were, and it's ignoring any global styles that we defined.

Back to Native Style

This Native setting means no styles in, no styles out. The default is Emulated where it allows those global styles in, but no styles go out.

simple-form.component.ts

@Component({
  encapsulation: ViewEncapsulation.Emulated,  // .None
  selector: 'app-simple-form',
  template: ` ... `,
  styles: [ ... ]
})

There's also None where styles defined inside your component would be also defined globally, but I don't see many use cases for that. I almost always leave it on the default. Define some styles inline where I need them. Otherwise just use the global styles from whatever library I'm using.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?