Transforming elements using directives

The Angular framework includes a set of ready-made structural directives that we can start using straight away in our apps:

• ngIf adds or removes a portion of the DOM tree based on an expression.
• ngFor iterates through a list of items and binds each item to a template.
• ngSwitch switches between templates within a specific set and displays each one depending on a condition.

We describe each one of them in the following sections.

Displaying data conditionally

The ngIf directive adds or removes an HTML element in the DOM, based on the evaluation of an expression. If the expression evaluates to true, the element is inserted into the DOM. Otherwise, the element is removed from the DOM. We could enhance our hero component from the previous chapter by leveraging this directive:

<p *ngIf="name === 'Boothstomper'">{{name}} hero works!</p>

When the name property of...