A guide to content projection using ng-template

There are many great articles regarding how  Content Projection works, and all the ways you can achieve it to create reusable components in Angular.

This article is more subjective, we’ll look at reducing the “surface area” of our toolbox. — We’ll opt to use ng-template and ngTemplateOutletfor all things content projection.

Style - Filtering our knowledge and honing specific skills / patterns

Referring to the  Angular docs, we have three situations within content projection we may want to achieve.

• Single Slot: A single source of content
• Multi Slot: Multiple sources of content
• Conditional: Render source of content only when condition is met

Our example is a loading component. This loading component will be able to render multiple states, and have to ability to insert custom templates per state.

#javascript #angular #technology