Transforming elements using directives
The Angular framework includes a set of ready-made structural directives that we can start using straight away in our applications:
- 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 will 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.
Do you recall from the previous chapter that the product details component was loaded even if there was no product selected? We can now fix that issue by binding...
