Unable to add style to projected content in Angular 4

Question

I have created a modal component that projects 3 sections: header, body and footer.

modal.component.html

<div>
    <ng-content select="section[modal-header]"></ng-content>
    <ng-content select="section[modal-body]"></ng-content>
    <ng-content select="section[modal-footer]"></ng-content>
</div>

Thus, usage:

<modal-component>
    <section modal-header>Header</section>
    <section modal-body>Body</section>
    <section modal-footer>Footer</section>
</modal-component>

I want to style the header. Thus:

modal.component.scss

:host([modal-header]) { font-weight: bold; }

This doesn't work. Am I missing anything?

Muhammed Albarmavi · Accepted Answer · 2019-10-07T15:20:52.033

10

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

:host /deep/ [modal-header] { font-weight: bold; }

In angular documentation they mention that /deep/ is deprecated so you can use ::ng-deep

:host ::ng-deep [modal-header] { font-weight: bold; }

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Component Styles

stackblitz demo

edited Oct 07 '19 at 15:20

answered Aug 09 '17 at 01:10

Muhammed Albarmavi

23,240
8
66
91

1

Thank you so much! – Karma Aug 09 '17 at 11:04
4

It's being deprecated, what should we do instead? – devmiles.com Feb 12 '18 at 22:28
2

As it is deprecated, the answer from @Saksham should be used – Adam Marshall Oct 07 '19 at 09:53
@AdamMarshalyes that true but until now nothing mention at the angular documentation about the correct why to change some child component style from the current component,setting the `ViewEncapsulation.None` is not the answer sometime use use some third party component and we cant change the ViewEncapsulation option. – Muhammed Albarmavi Oct 07 '19 at 12:13

score 7 · Answer 2 · answered Aug 31 '19 at 07:21

7

Quoting from the official Angular documentation

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).

The other alternative could be to use the @Component decorators encapsulation property in a combination with adding a class to the host using @HostBinding

Set child component's encapsulation: ViewEncapsulation.None. This will make sure that there is no style encapsulation and the styles are valid globally.
To encapsulate the styles, add a custon CSS class to the host of the child component as
```
@HostBinding('class.custContainerClass') containerClass: boolean = true;
```

Write your styles in the child component as

.custContainerClass .projectedElement { }

Demo at: https://stackblitz.com/edit/angular-add-styles-to-projected-content

answered Aug 31 '19 at 07:21

Saksham

9,037
7
45
73

This works perfectly and should be the accepted answer – Adam Marshall Oct 07 '19 at 09:52
what if I use third party component and I cant set the `ViewEncapsulation.None` – Muhammed Albarmavi Oct 07 '19 at 12:14
@malbarmawi Set it to `Native` in the parent component – Saksham Oct 07 '19 at 14:01
@Saksham what gone to happen in case of native the emulator meantto act like native , because not all browser support native until now I don't found a link to tell we can now switch to native , can you verify you answer by add an example – Muhammed Albarmavi Oct 07 '19 at 14:43

score -1 · Answer 3 · answered Jul 12 '18 at 15:16

I think you should add css in component where your are using modal-component

like if you are using modal-component in app.component.html then you should write css in app.component.scss without host and ng deep

[modal-header] {
  font-weight: bold;
}

actually it has 2 reasons, 1 because there might be change that you are using modal-component in two different component and want different css for sections.

and second is that you should write css where actual content is.

and if you still want to write css code in your modal-component then you should create parent container to hold that content like:

<div class="header">
  <ng-content select="section[modal-header]"></ng-content>
</div>
<ng-content select="section[modal-body]"></ng-content>
<ng-content select="section[modal-footer]"></ng-content>

and in your modal.component.scss file

.header {
  font-weight: bold
 }

because ng-content is replaced with new template so you need parent container.

Unable to add style to projected content in Angular 4

3 Answers3