Angular difference between ng-container and div

Question

Since I can do *ngif on both why even use ng-container and just use div everywhere instead? I know it has something to do with the dom not being as cluttered but I actually want to know if that is true and how a bigger dom impacts the app.

Answer 1

ng-container doesn't render any HTML, while a div adds a node to the DOM. If you have a larger DOM, you will negatively impact performance and memory usage.

Let's say you have a list of 500 people and you want to display their name, so you do

<div *ngFor="let person of people">
  <div *ngIf="person.visible">
    <span>{{ person.name }}</span>
  </div>
</div>

That adds 500 elements to the DOM, affecting performance. Now, if you try the same thing with ng-container

<div *ngFor="let person of people">
  <ng-container *ngIf="person.visible">
    <span>{{ person.name }}</span>
  </ng-container>
</div>

That won't add anything unecessary to the DOM