::ng-deep
is going to be depracated.
Use css hierarchy. If you have a global css or scss file... then in the component, wrap this in a div and give it a class.
For example,
<div class="content-wrapper">
...all your html code here
</div>
Then, in your global css/scss file, you can target the .mat-form-field-underline
class like so:
.content-wrapper .mat-form-field-underline {
display: none;
}
Here, notice that we don't use comma after class names. This is using hierarchy. It saying that we only want to target the native .mat-form-field-underline
class that is wrapped inside the .content-wrapper
Hope this helps. Glad my senior developer had shared me this as we used ViewEncapsualtion, which bled css all over the place. This is the right solution to our use case, hope it helps yours.
This also works for other native mat classes for customization of your code/html.