[Angular] Remove divs to Preserve Style and Layout with ng-container in Angular

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

 

When we using Content Projection in a DUMP component:

<div class="card" style="width: 18rem;">
  <ng-content select=".heading"> </ng-content>
  <div class="card-body">
   <ng-content select=".body"> </ng-content>
  </div>
</div>

We are using <ng-content> here to get projected element from the SMAR component:

<app-card>
  <div class="heading"> <!-- add a extra div with class selector to wrap the elements -->
    <img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
  </div>
  <div class="body"> <!-- add a extra div with class selector to wrap the elements -->
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</app-card>

 

It ends up we have a extra div in the DOM, to remove that extra div, we just need to replace 'div' with 'ng.container':

<app-card>
  <ng-container class="heading">
    <img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
  </ng-container>
  <ng-container class="body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </ng-container>
</app-card>