angular - Where to place *ngIf directive?

Question

Is there any difference between

<ng-container *ngIf="flag">
       <child-component></child-component>
</ng-container> 

or directly

<child-component *ngIf="flag"></child-component>

And what is the best practice for that?

Answer 1

ng-container is a directive that is not loaded into the DOM by Angular. It's function is to group together other directives. In the case of ngIf it is used to group together different elements that all depend on the same flag.

<ng-container *ngIf="flag">
  <div>1</div>
  <div>2</div>
  ...
</ng-container>

If you only have one element there is not much grouping to do and you can place the *ngIf directly on the element.