Angular – Structural Directives

Angular Structural Directives

Angular Structural Directives with Examples

An Structural directive changes the DOM layout by adding and removing DOM elements.

Structural directives are responsible for HTML layout manipulation . They change the DOM’s structure, typically by adding, removing, or manipulating elements.

Angular provide us some built-in structural directives such as  ngIfngFor, and  ngSwitch.

Structural directive can directly apply on to the host element. Structural directives are easy to recognize with an asterisk (*) precedes, like

1.  Examples of *ngIF :

2. Examples of *ngFor:

3. Examples of *ngSwitch:


Now Understanding the asterisk(*), what is does:

consider the following example, whenever angular seen the  asterisk(*) symbols,  it generate an template tag, and wrap that element in to it. Angular transform the  ngIf to be a property binding. This all happened at the run time or can say behind the scene.

Understanding the asterisk in angular directives