How To Avoid Ng-deep

It sounds like you’re asking about how to avoid using ::ng-deep in Angular. ::ng-deep is a deprecated Angular CSS selector used to apply styles to child components in component stylesheets, but Angular recommends avoiding it because it breaks style encapsulation and will eventually be removed.

Why Avoid `::ng-deep`?

It pierces Angular’s View Encapsulation, which can lead to unexpected side effects.
It’s deprecated and will be removed in future Angular versions.
Makes your styles harder to maintain and debug.

How To Avoid Using `::ng-deep`?

1. Use Global Stylesheets

Move the styles that need to apply across components into global styles.css or styles.scss.
Global styles are not scoped and affect all matching elements.

2. Use `ViewEncapsulation.None`

Set your component’s encapsulation to None if you want styles to leak outside the component deliberately.

typescriptCopyEditimport { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent { }

Be careful: this disables encapsulation for the entire component.

3. Use CSS Custom Properties (Variables)

Define CSS variables in a parent or global stylesheet.
Child components can consume these variables, avoiding the need for deep styling.

4. Leverage Component Inputs or Classes

Pass styling info via @Input() properties.
Use conditional classes to style child components instead of relying on deep selectors.

5. Use ::part and ::theme (Web Components)

For Angular elements that use Shadow DOM, utilize ::part selectors if your component exposes parts.

6. Use Angular CDK / Component APIs

Some Angular Material or CDK components provide styling hooks or inputs you can use without deep styling.