Load external CSS into component

by

See also https://angular.io/docs/ts/latest/guide/component-styles.html

View encapsulation

To allow external styles to affect the content of components you can change view encapsulation (that’s what prevents styles to “bleed into” components). 

@Component({
    selector: 'some-component',
    template: '<div></div>',
    styleUrls: [
        'http://example.com/external.css',
        'app/local.css'
    ], 
    encapsulation: ViewEncapsulation.None, 
})
export class SomeComponent {}

View encapsulation fulfills a purpose. The better way is to add styles directly to the component they should affect.
ViewEncapsulation is set per component and may come handy in some situations.

“shadow piercing”

You can also use shadow piercing CSS combinator ::ng-deep (>>> and /deep/ are deprecated) to build selectors that cross component boundaries like

:host ::ng-deep .ng-invalid {
  border-bottom: solid 3px red;
}

which styles all tags with a class ng-invalid in the current component or any descendant with a red underline no matter if encapsulation is None or Emulated. It depends on browser support whether /deep/ works with Native (as far as I know this is not supported by any browser anymore).

Note

The shadow piercing CSS combinators are similar to the ones from the shadow DOM spec where they are deprecated since quite a while.

With the default ViewEncapsulation.Emulated Angulars own /deep/ and ::shadow implementation are used and they will work even when Chrome removes native support.

With ViewEncapsulation.Native Angular uses Chromes shadow DOM CSS combinators (only Chrome supported them at all anyway AFAIK). If Chrome finally removes them, then they won’t work in Angular as well (again ViewEncapsulation.Native only).

Global styles

Styles added globally (index.html) don’t consider component boundaries. Such styles are not rewritten by Angular2 and ViewEncapsulation.Emulated doesn’t apply to them. Only if ViewEncapsulation.Native is set and the browser has native shadow DOM support, then global styles can’t bleed in.

See also this related issue https://github.com/angular/angular/issues/5390

More Related Contents:

  1. Can I get today’s date plus one month in moment js? [duplicate]
  2. Using Pipes within ngModel on INPUT Elements in Angular
  3. Location and HashLocationStrategy stopped working in beta.16
  4. How can we detect when user closes browser?
  5. Angular 4: no component factory found,did you add it to @NgModule.entryComponents?
  6. Compile dynamic HTML in Angular 4/5- something similar to $compile in Angular JS
  7. What is in Angular 2 Opaque Token and What’s the Point?
  8. angular 2 – adding 3rd party libs
  9. Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays
  10. Ionic – Horizontal scroll tab for Categories [duplicate]
  11. Difference between interfaces and classes in Typescript
  12. Angular2 router.navigate refresh page
  13. Angular 2 ng2-bootstrap modal inside child component called from parent component
  14. formGroup expects a FormGroup instance
  15. Angular 2: How to use JavaScript Date Object with NgModel two way binding
  16. How to truncate text in Angular2?
  17. Angular Material 2 DataTable Sorting with nested objects
  18. Angular 2 – Services consuming others services before call a method
  19. want to show more data in another component when view in detail button is clicked (angular 6)
  20. What is the difference between “ng-bootstrap” and “ngx-bootstrap”?
  21. What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4
  22. How to get Angular2 to bind component in innerHTML
  23. Want to prevent Component recreation while routing in Angular 2
  24. What is the difference between declarations, providers, and import in NgModule?
  25. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  26. How to return observable from subscribe
  27. Limit input field to two decimal places – Angular 5
  28. How to create and download text/Json File with dynamic content using angular 2+
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment