Built-in Structural Directives in Angular

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.

In this article, we will see more about Built-in structural directives in Angular.

Structural 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. Unlike attribute directives, which modify the behavior or appearance of existing elements, structural directives actually change the structure of the DOM itself.

Steps to Create Angular Application :

Step 1: Install the Angular CLI using the following command

npm install -g @angular/cli

Step 2: Create a new Angular Project.

ng new new-project
cd new-project

Step 3: To start the application run the following command.

ng serve

Folder Structure:

👁 werg

Dependencies:

"dependencies": {
 "@angular/animations": "^17.3.0",
 "@angular/common": "^17.3.0",
 "@angular/compiler": "^17.3.0",
 "@angular/core": "^17.3.0",
 "@angular/forms": "^17.3.0",
 "@angular/platform-browser": "^17.3.0",
 "@angular/platform-browser-dynamic": "^17.3.0",
 "@angular/router": "^17.3.0",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
 },
 "devDependencies": {
 "@angular-devkit/build-angular": "^17.3.0",
 "@angular/cli": "^17.3.0",
 "@angular/compiler-cli": "^17.3.0",
 "@types/jasmine": "~5.1.0",
 "jasmine-core": "~5.1.0",
 "karma": "~6.4.0",
 "karma-chrome-launcher": "~3.2.0",
 "karma-coverage": "~2.2.0",
 "karma-jasmine": "~5.1.0",
 "karma-jasmine-html-reporter": "~2.1.0",
 "typescript": "~5.4.2"
 }

Built-in Directives :

Angular provides several built-in structural directives that are commonly used in web development projects. These directives include ngIf, ngForOf, ngSwitch, ngTemplateOutlet, and ngComponentOutlet. Let's explore each of these directives in detail.

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"

Example: Using `ngIf` with template variables:

Output :

👁 Screenshot-2024-03-02-151814

If active value is set as true, it displays Condition is true else it shows Condition is false.

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"

Example: ngFor over an array:

Output:

👁 Screenshot-2024-03-02-144300

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:

<div [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:

Output:👁 Screenshot-2024-03-02-151246

Here , as the value of the variable car changes, the matching element gets displayed .