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>
[Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
原文：https://www.cnblogs.com/Answer1215/p/9221430.html