Unable to add style to projected content in Angular 4
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
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