1
Reply

What Is structural Directives in Angular?

Kirtesh Shah

Kirtesh Shah

3y
1.1k
0
Reply

What Is structural Directives in Angular?

    Structural directives in Angular allow you to modify the DOM based on certain conditions. Here are some examples of commonly used structural directives:

    *ngIf: This directive is used to conditionally add or remove elements from the DOM based on a boolean expression. For example, the following code will only show the div element if the “showElement” variable is true:

    1. <div *ngIf="showElement">This element is only shown if showElement is true.</div>

    *ngFor: This directive is used to iterate over a collection of items and create a new element for each item in the collection. For example, the following code will create a list of items based on an array of strings:

    1. <ul>
    2. <li *ngFor="let item of items">{{ item }}</li>
    3. </ul>

    *ngSwitch: This directive is used to conditionally add or remove elements from the DOM based on a switch expression. For example, the following code will show a different message depending on the value of the “status” variable:

    1. <div [ngSwitch]="status">
    2. <div *ngSwitchCase="'success'">Success message</div>
    3. <div *ngSwitchCase="'warning'">Warning message</div>
    4. <div *ngSwitchDefault>Error message</div>
    5. </div>

    In this example, the *ngSwitch directive checks the value of the “status” variable and shows a different message based on its value.