TIL 5-24-21

ng-container

  • This is used to avoid redundant elements in your markup.
  • Typically used with structural directives like *ngFor & *ngIf

without ng-container

<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

will output:

<div>
  <div>
    Todo Content 1
  </div>
  <div>
    Todo Content 2
  </div>
  <div>
    Todo Content 3
  </div>
</div>

with ng-container

<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

will output:

<div>
  Todo Content 1
</div>
<div>
  Todo Content 2
</div>
<div>
  Todo Content 3
</div>

can’t have more than one structural directive on an element

//this is illegal af

<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

src of all the code snippets thus far.