Structural Directives

Attribute Directives

In Angular, structural directives are a type of directive that modify the layout of the DOM by adding, removing, or replacing elements based on certain conditions. We have three built-in structural directives namely : *ngIf, *ngFor, *ngSwitch.

Features of Structural Directives :

Control Rendering: They conditionally render templates based on expressions, allowing you to show or hide content based on certain conditions.
Iteration: They enable you to loop through collections and generate multiple instances of a template for each item in the list.
Altering the DOM layout : Structural directives allow us to add or remove elements from DOM based on the truthiness of the expression.

**1. *ngIf Directive**

This directive helps us to conditionally include or remove elements from the DOM. Using ngIf directive we can create dynamic user interfaces.

Syntax :

*ngIf="Expression"

2. *ngFor Directive

This directive helps us to iterate over Arrays, Objects, Lists etc and display a template for each item in the collection. This is generally and efficient way used to dynamically display the data over the repeated items. This is similar to for loop in our programming languages.

Syntax :

*ngFor="let <item> of Collection"

3. *ngSwitch Directive

This directive helps us to conditionally display an element from different section of elements based on given expression. It is similar to switch case in our programming languages.

Syntax:

<element [ngSwitch]="expression">
      <some-element *ngSwitchCase*="value"> Contents... </some-element>
      <some-element *ngSwitchCase="value"> Contents... </some-element>
      <some-element *ngSwitchCase> Contents... </some-element>
      <some-element *ngSwitchDefault>Default value...</some-element>
</element>

Example demonstrating all three structural directives :

HTML

<!-- app.component.html -->

<div *ngIf="showExample">
    <p>Programming Languages:</p>
    <div *ngFor="let item of items">
        <li>item</li>
    </div>
    <div [ngSwitch]="status">
        <p *ngSwitchCase="'active'">Status : Active</p>
        <p *ngSwitchCase="'inactive'">Status : Inactive</p>
        <p *ngSwitchDefault>Status : Undefined</p>
    </div>
</div>

JavaScript

//app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    items = ['Java', 'Python', 'C'];
    status = 'active';
    showExample = true;
}

Output:

In the above example, we have seen the usage of *ngIf, *ngFor and *ngSwitch. Using ngIf on `showExample` property, to determine whether to show the content , and iterating over an `items` array using *ngFor, and a `status` property used with *ngSwitch to conditionally display different messages based on its value.

Difference between structural and attribute directives

Structural directives manipulate the DOM layout by adding, removing, or replacing elements, while attribute directives modify the appearance or behavior of elements without affecting their structure. Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more.

Table of Content

Structural Directives
Attribute Directives
Differences between structural and attribute directives

There are mainly two types of directives Structural Directives and Attribute Directives. In this article let us learn more about these directives

Tags:

#AngularJS-Basics #AngularJS #Web Technologies