Understanding Content Projection in Angular

Content projection, what is it?

Content projection (also known as transclusion) is a way to import HTML content from outside a component and insert that content into the component’s template in a designated spot.

Therefore, using content projection, you can obtain the result shown in the following image.

Notice that the component works like a mirror. Another more complicated example is the one shown in the following image in which a letter with user data is being configured.

What is a ng-container?

The Angular ng-container is a grouping element (syntax element) that doesn’t interfere with styles or layout because Angular doesn’t put it in the DOM.

And we can use structural directives with it.

A structural directive changes the DOM layout by adding, removing, or manipulating DOM elements.