Angular DOM

Rendering what's displayed inside the DOM, using control flow and directives.

Published: 2/17/2021

Conditionally display HTML block#

Note: Since v17 there’s an $@$ syntax that doesn’t require the ‘CommonModule’ to be imported.

Using ng-container#

ng-container is a special element that can hold structural directives (ngIf, ngFor) without adding new elements to the DOM.

Example#

Code:

<section>
  <ng-container>
    <h3>User bio</h3>
    <p>Here's some info about the user</p>
  </ng-container>
</section>

Render:

<section>
  <h3>User bio</h3>
  <p>Here's some info about the user</p>
</section>

Don’t render component wrapper in the DOM#

Rendering a components wrapper such as <app-my-component> can interrupt nesting requirements, especially in flex box frameworks where .row > .col etc.

Add this to the components css: :host { display:contents }