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:
ngIfadds or removes a portion of the DOM tree based on an expression.ngForiterates through a list of items and binds each item to a template.ngSwitchswitches 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...