Angular: Structural directives like *ngIf and *ngFor without the extra elements

One drawback I've found with Angular is that you often found yourself adding unnecessary DOM elements to your templates, just so you can wrap a block of elements in an *ngIf statement. See the below example:

<div *ngIf="someVariable">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

The wrapping div isn't necessarily needed here, and these unneeded elements can result in messy markup, and sometimes make writing CSS rules more difficult.

The solution is the ng-container directive, a grouping element that doesn't get added to the DOM at all, and thus won't affect your layout. Here's the above example again, this time using ng-container.

<ng-container *ngIf="someVariable">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</ng-container>

Another issue I've come across is that you can't have more than one structural directive on the same element, e.g. you can't apply both *ngIf and *ngFor to the same element. The below code will result in an error:

<ul>
  <li *ngFor="let item of items" *ngIf="item.foo === 'bar'">{{ item.text }}</li>
</ul>

Rather than adding the extra wrapping DOM element, we'll use the ng-container directive again:

<ul>
  <ng-container *ngFor="let item of items">
    <ng-container *ngIf="item.foo === 'bar'">
      <li>{{ item.text }}</li>
    </ng-container>
  </ng-container>
</ul>

With this technique, you can ensure that there are no unnecessary elements in your DOM.