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.
Let's learn about each of these Structural Directives in detail and create few examples using them: