Content projection using ng-content in Angular

Content projection using ng-content in Angular 2+

Objective:

To project HTML content in component using <ng-cotent>.

To project multiple content by using selector like css and html tag.

Lets design the component where we want to project our content:

Component selector name: app-ngcontentprojector

<div>

      <p>Guidelines</p>

      <ng-content></ng-content>

</div>

Let's use this component where we pass our content:

<app-ngcontentprojector>

       <h1>Here are new guidelines</h1>

</app-ngcontentprojector>

Multiple pieces ng-content componet:

Component selector name: app-multiplengcontentprojector

<div>

      <ng-content class=".header"></ng-content>

      <p> Projected content in header and footer. </p>

      <ng-content class=".footer"></ng-content>

</div>

Let's use this component where we pass our content:

<app-multiplengcontentprojector>

         <span class="header">Header Text</span>

         <div class="footer">Footer Text</div>

</app-multiplengcontentprojector>