The ultimate guide to style content projection in Angular

Explore all possible approaches to style projected content as well as their advantages and downsides.

Kevin Kreuzer
8 min readApr 25, 2022

ng-content is an important concept to create reusable and flexible components. With the help of ng-content content can be projected by a parent component into a predefined slot. In some cases, you want to apply some styles to the projected content.

It doesn’t sound too hard. Does it? Well, it’s actually not so easy! Hence this blogpost 😉

We are not talking about adding the possibility to style our component, but about styling the projected content. If you are interested in the first please check out my other blogpost on how to create reusable components.

An example, please!

Let’s take a look at a practical use case. Imagine we want to implement a my-header component that provides a projection slot and could also display a logo on the right side.

--

--

Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.