Sometimes, we want to use ::ng-deep with Angular.

In this article, we’ll look at how to use ::ng-deep with Angular.

How to use ::ng-deep with Angular?

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.

For instance, we write

<div
  class="overview tab-pane"
  id="overview"
  role="tabpanel"
  [innerHTML]="project?.getContent('DETAILS')"
></div>

to add a div with dynamic GHTML rendered from project?.getContent('DETAILS') string.

Then we style the dynamic HTML with

.overview {
  ::ng-deep {
    p {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

Conclusion

To use ::ng-deep with Angular, we can add it to a style file and use it to style to style child component styles in the parent component.