::ng-deep going to be deprecated – Any alternatives?

by

After scouring through the actual notes from the committee meetings on this stuff, it doesn’t look like there is an alternative put forward yet. Using the ::ng-deep syntax ensures that you let Angular take care of breaking out of the style encapsulation (for DOM nodes in child components in your template) that they are doing for your styles (and not using browser native features, making it more future-proof obviously). I think that note is just to let you know that whenever the actual browser mechanism is put in place they plan on implementing it. I personally wouldn’t shy away from using it tho.

The only way forward without using that operator in your CSS is to completely opt out of letting Angular manage the style encapsulation for your component by doing this:

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

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

If you do this, your styles become global though, so make sure you prepend each style rule with your component to make sure that they don’t leak beyond that. For example, if you have a MyCustomComponent component with a selector of my-custom-component:

my-custom-component button { ... } /* good */
button { ... } /* bad */

More Related Contents:

  1. Can I get today’s date plus one month in moment js? [duplicate]
  2. angular-cli server – how to proxy API requests to another server?
  3. Changing the page title using the Angular 2 new router [duplicate]
  4. How do I support Internet Explorer in an Angular 8 application?
  5. Passing data into “router-outlet” child components
  6. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  7. No provider for HttpClient
  8. How to decrease prod bundle size?
  9. Dynamic routing based on external data
  10. How do I detect user navigating back in Angular2?
  11. Access environment variables in production build Angular 4
  12. Handling refresh tokens using rxjs
  13. Get last created document in a Firebase Firestore collection
  14. What is let-* in Angular 2 templates?
  15. What is the read parameter in @ViewChild for
  16. angular2 observable, getting undefined in component
  17. Angular 2: How to write a for loop, not a foreach loop
  18. Invert Angular 2 *ngFor
  19. angular’s ng-init alternative in Angular 2
  20. Cannot read property “totalPrice” of undefined
  21. How to use Bootstrap in an Angular project?
  22. @Input property is undefined in Angular 2’s onInit
  23. Angular ngClass and click event for toggling class
  24. Angular reactive Form error: Must supply a value for form control with name:
  25. Angular, Http GET with parameter?
  26. How to mock Angular 4.3 httpClient an error response in testing
  27. How to add multiple headers in Angular 5 HttpInterceptor
  28. Angular 6 – how to mock router.events url response in unit test
  29. Angular5: Deploying Angular application to multiple clients
  30. Cypress 12.8.1 not working with Stripe Elements iframe

Leave a Comment