1

I am using *ngContainerOutlet to dynamically load components, but it encapsulates the component's template in a ng-component tag, causing my CSS rules to fail.

For instance with :

<div class="my-class">
    <ng-container *ngComponentOutlet="MyComponent"></ng-container>
</div>

I end up with something like :

<div class="my-class">
    <ng-component>
        <div>my content...</div>
    </ng-component>
</div>

causing my-class to not be applied to the component's template.

I tried to create a CSS rule like my-class > ng-component but since it's dynamically created it doesn't work. Same with :first-child.

Is there a solution, either with CSS or Angular (for instance, prevent this encapsulation)?

Thanks, Alexandre

Alexandre Couret
  • 354
  • 1
  • 3
  • 16

1 Answers1

1

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

You can use the /deep/ combinator to overcome encapsulation:

:host /deep/ ng-component {
  ...
}

See also

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    This is exactly what I needed, thank you! This is link explains it : https://angular.io/docs/ts/latest/guide/component-styles.html – Alexandre Couret May 09 '17 at 08:45