Structural Directives

1. Introduction
2. Built-in structural directives
1. NgIf
2. NgFor
3. NgSwitch
3. Structural directive pseudonym
4. Create custom structural directive

Introduction

Structural directive revamps the DOM by adding, manipulating or removing the host element based on certain conditions. It allows you to conditionally render or repeat elements in your templates.

Structural directives are denoted by an asterisk (*) preceding the directive attribute in the HTML template, which indicates their special syntax. This syntax makes it easier to read and understand the intended behavior of the directive.

Built-in structural directives

Angular provides several built-in structural directives which allow you to conditionally render content, repeat elements or switch between different views

Structural directive pseudonym

The asterisk * is a pseudonym that angular interprets into it's original form. The reason for this is to convert the longer form into a simple shorthand *.

Angular transforms the asterisk * in front of a structural directive into an <ng-template> that surrounds the host element and its descendants.

Create custom structural directive

create custom structural directives by using the @Directive decorator and implementing the necessary logic for manipulating the DOM structure based on requirements.