As the name mentions, Structural Directives alter the DOM structure by adding, appending, or removing DOM elements on the fly.
Angular Structural Directives are displayed with an (*) asterisk symbol before the directive name.
Some of the commonly used Structural Directives are as follows:
- ngFor: Repeater directive generally used to loop through and display a list of elements.
- ngIf: Shows or hides DOM elements depending on the result of expression evaluation; the result is either true or false.
- ngSwitch: Returns if the match expression value matches the value of the switch expression. The result returned can be any value; a conditional check is done for matching values.
Only one Structural Directive is allowed per element.
Let's learn about each of these Structural Directives in detail and create few examples using them:
