1

I have a method in my angular application that creates a component and inserts it into a parent element via a ComponentFactory (the method does some more stuff later, but that should not matter). My problem is, that the generated component nodes don't have any _ngcontent-cXXX attributes. Hence, the style encapsulation prevents the created components from inheriting any styles from their parents. With non-dynamic components, it works just fine.

Of course I could get the _nghost-XXX attribute of the parent element via DOM access and simply append the number myself, but that is not very clean. Is there a better way to do it?

Here is the line of code responsible for creating and inserting the component:

const child= hostComponent.createComponent(factory);

Here is some CSS that should work (host.component.scss):

.app-child { color: red; }

I am using classes as component selectors, if that matters.

If you need more code or information, let me know :)

Andifined
  • 479
  • 6
  • 19
  • 1
    See this answer (you can use `ng-deep`): https://stackoverflow.com/a/36528769/546407 – Lyczos Jan 15 '19 at 14:31
  • `ng-deep` is deprecated and should not be used anymore. I also don't want the selector to 'pierce' any lower than one level... – Andifined Jan 15 '19 at 14:36
  • 1
    Yep, I know but there is no replacement for `ng-deep` yet. Keep using it until Angular team provides the replacement. As far as I know removing it is related to W3C specs – Lyczos Jan 15 '19 at 14:40
  • 1
    @Lyczos At least `::ng-deep` solves my problem and when using it with a direct child selector, i.e. `::ng-deep > *` it doesn't pierce more than that, but I hope for a programmatic way. Thanks though, will use it for now and replace it in case of a better solution. – Andifined Jan 15 '19 at 14:54

0 Answers0