Search code examples
cssangularsassng-deep

How to access CSS of Angular child component with ::ng-deep

I'm trying to access and edit the CSS class of a child component using ::ng-deep. I have tried different versions of the provided code below but I was unable to access the CSS. The structure of the HTML component is as follows:

enter image description here

This is how I'm trying to access the CSS from the parent component and change the grid-template-columns property of the class:

::ng-deep{
  app-operator-filter{
    .header-logos-card{
      grid-template-columns: repeat(4,1fr);
    }
  }
}

What is the correct syntax for achieving this? I'm also open to other suggestions for accessing child components as I've read that ::ng-deep is not reliable and could be deprecated soon?

Solution

  • This solution to the problem is this:

    :host ::ng-deep app-operator-filter{
  .header-logos-card {
    grid-template-columns: repeat(4,1fr) !important;
  }
}

    !important was a crucial addition as the changes were being overwritten without it.