Content projection is an concept that helps developers build reusable Angular components. It allows you to pass data from a parent component to a template of a child component. It’s similar to transclusion in Angular.js

Content Projection with Angular 10 Example

Let’s now see with a simple Angular 10 example how we can project content from a parent component to its child.

We’ll be using Stackblitz for creating our content project example.

You can check our example from this link.

In Stackblitz, we already have a project generated with a couple of components - AppComponent and HelloComponent.

The hello component takes an input property called name and renders the following content:

<h1>Hello !</h1>

#angular