Diving into the built-in control flow in Angular 17

Before Angular 17, control flow within templates was predominantly managed using structural directives. Let’s start by exploring the structural directives.

Structural directives

Structural directives are responsible for altering the structure of the DOM and orchestrating how elements are added, removed, or repeated based on certain conditions. Here’s the list of available directives in Angular to control the execution of the template:

• *ngIf: This structural directive is used to conditionally include or exclude elements from the DOM based on the truthiness of an expression. For instance, consider the following code snippet, which displays the message No items found if the items array is empty:

  <div *ngIf="items.length === 0">No items found </div>

  To display alternative content when the condition is false, we can use an else statement, like so:

  <div *ngIf="items.length === 0; else...