Structural directives are a fundamental part of Angular with which everyone should be familiar. They are responsible for manipulating the DOM by adding, deleting or modifying elements. Even if you've never written a structural directive, it's likely that you're using * ngIf and * ngFor in your templates quite frequently. The asterisk (*) indicates that this is a structural directive. .

In other words, structural directives are directives that modify the DOM structure by adding or deleting its elements. The structural directives reconstruct the project by adding, eliminating and replacing the elements in the DOM. Structural directives are responsible for modeling or remodeling the DOM structure, typically by adding, deleting or modifying elements.

Like the other directives, the structural directive applies to a host element. The directive then does what it wants to do with that host element. The structural directives are very simple to recognize. An asterisk (*) precedes the directive attribute name. It does not require brackets or parentheses as the attribute directive.These directives are the way to control how the component or element is represented in a model.

There are basically 3 built in structural directives available in Angular.

1. NgIf (*ngIf )
2. NgFor (*ngFor)
3. NgSwitch (*ngSwitch)

Structural directives are always preceded with the * directive attribute name so that they can be recognized easily.

Let’s see one by one how they work in next chapters.