0

As angular official documentation says, ::ng-deep , >>>, /deep/ is deprecated and will be removed soon:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

If i am using mat components like <mat-checkbox> or a more comprehensive one like <mat-table> how could I have some changes to that component from parent?

  1. Should I cancel view encapsulation for that component and write styles in .SCSS files?
  2. How do I edit styles of inner material angular component if deep selector is going to be removed?
  3. What is the proper way to do that?
ng-hobby
  • 2,077
  • 2
  • 13
  • 26
Anton
  • 516
  • 1
  • 6
  • 22

1 Answers1

1

As the mention document says you can use the combination of ::ng-deep with :host and it will be OK in this way.

In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components

:host /deep/ h3 {
  font-style: italic;
}

But, you also can use the custom CSS class & id to apply your custom css on .CSS or .SCSS files on the Angular Material Components. using .class & #id in combination with mat default classes works. In addition you can use custom Angular material classes in your componnent style files ( .CSS or .SCSS) to override the like this:

.app-component-style {
/* All the CSS here */
.mat-tab-group .mat-tab-label {color: green;}
}

So, keep using it as Dudewad mention here too: https://stackoverflow.com/a/49308475/4185370

ng-hobby
  • 2,077
  • 2
  • 13
  • 26
  • Thank you for detailed answer. Going to read and try that out in a moment. So, ::ng-deep with :host won't be deprecated ? I worry only about that – Anton Sep 09 '20 at 08:53
  • `::ng-deep` with `:host` won't disturb template encapsulation, So it's ok to use. Since there is no alternative right now, it's ok. Use it and don't worry. – ng-hobby Sep 09 '20 at 09:40