Styles in component for D3.js do not show in angular 2

by

Update

Angular and SASS agreed on supporting ::ng-deep (instead of >>> or /deep/) a while ago until ::slotted or whatever makes it into browser standards becomes available in all browsers.

ViewEncapsulation.Emulated (default)

That’s by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they were added.

D3 generates HTML dynamically without Angulars knowledge and Angular can’t apply the classes to make the styles apply on the generated HTML.

If you add the styles at the entry point HTML file, Angular also doesn’t rewrite the styles and the added helper classes don’t take effect.

ViewEncapsulation.None

With encapsulation: ViewEncapsulation.None Angular doesn’t do this rewriting, therefore the result is similar to adding the HTML to the index.html.

“Shadow-piercing”

Alternatively you can use the recently introduced shadow piercing CSS combinators >>>, /deep/ and ::shadow (::shadow is just replaced by a and thus very limited). See also https://stackoverflow.com/a/36225709/217408 and the Plunker

:host /deep/ div {
  color: red;
}

SASS

/deep/ works fine with SASS but the alias >>> doesn’t.

The shadow-piersing CSS combinators are rewritten by Angular and they don’t need to be supported by the browsers. Chrome supported them for a while but they are deprecated – but as said, that doesn’t matter, because Angular rewrites them to use its encapsulation emulation.

ViewEncapsulation.Native

Angular doesn’t support any way to style such components from the outside. Only if the browser provides support like CSS variables then these can be used.

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Angular 2 Sibling Component Communication
  4. JS : Convert Array of Strings to Array of Objects
  5. Detect click outside Angular component
  6. Angular2 – should private variables be accessible in the template?
  7. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  8. Ionic 2 Form goes up when keyboard shows
  9. Angular 4 pass data between 2 not related components
  10. Angular 2 View will not update after variable change in subscribe
  11. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  12. No provider for AngularFireDatabase, AngularFireAuth
  13. Multiple canActivate guards all run when first fails
  14. Call a function on click event in Angular 2
  15. D3: update data with multiple elements in a group
  16. TS2531: Object is possibly ‘null’
  17. Custom ExceptionHandler change detection lag
  18. Angular2 too many file requests on load
  19. Trigger update of component view from service – No Provider for ChangeDetectorRef
  20. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  21. Pass parameter into route guard
  22. Typescript dependency injection public vs private
  23. Rxjs Retry with Delay function
  24. What is the meaning of question mark in expressions in Angular 2?
  25. Merging http observables using forkjoin
  26. d3: make the d3.csv function syncronous
  27. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  28. Plain Javascript as Angular 2 service
  29. How to use angular 2 service with Ionic 2?
  30. How to implement behavior subject using service in Angular 8

Leave a Comment