In Angular 7 - How do I style HTML thats projected using ng-content.

Tech: Angular 7, Angular CLI, SASS, HTML5, Webpack.

My Code:

Note: my component html with transclusion / projection. This component has a scss file and the html that comes through the ng-content can only be styled if ng-deep is used e.g. :host::ng-deep

<table>
  <ng-content></ng-content>
</table>

This is my sass for the above components html:

:host::ng-deep {
  table {
    background-color: map-get($theme-brand, flat);
    display: flex;
    flex-direction: column;
    border: 1px solid map-get($theme-contrast, contrast-8);
    border-radius: 5px;

    tr {
      display: flex;
      justify-content: flex-end;
    }

    th, td {
      @extend %p-2;
      word-break: break-all;
      align-items: center;
      display: flex;
      text-align: right;
      width: 250px;
      color: map-get($theme-typography-color, regular);

      &:first-child {
        text-align: left;
        border: none;
        width: 100%;
      }
    }
  }
}

Note: So the above css for tr and th, td won't get styled due to the projection preventing the styling unless I use the ng-deep.

Things tried:

  • ng-deep (which works but don't want to use as its deprecated soon by browsers).

1 Answers

0
Christian Valentin On

According to this question, you have two different approaches:

1: Use the ::slotted pseudo selector, which is starting to be supported by new browsers. To use that, you will need to change the encapsulation property of @Component to ViewEncapsulation.ShadowDom.

2: A kind of brute force approach, which is setting the encapsulation property of @Component to ViewEncapsulation.None. This way, the style will be applied to all the page, without being processed by Angular.

You can check more details about ViewEncapuslation here: https://angular.io/api/core/ViewEncapsulation

There is also a discussion in Github about that.