Built-in Structural Directives in Angular
Last Updated :
26 Mar, 2024
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:
Folder StructureDependencies:
"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:
HTML
<!-- app.component.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div *ngIf="active">Condition is true</div>
<div *ngIf="!active">Condition is false</div>
</body>
</html>
//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
active: boolean = true;
}
Output :
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:
HTML
<!-- app.component.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<ul *ngFor="let name of names">
<li>{{name}}</li>
</ul>
</body>
</html>
// app.component.ts
names=['a','b','c','d','e']
Output:
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:
HTML
<!-- app.component.html -->
<ul [ngSwitch]="car">
<li *ngSwitchCase="'bmw'">Selected car is BMW</li>
<li *ngSwitchCase="'audi'">Selected car is Audi</li>
<li *ngSwitchCase="'ferrari'">Selected car is Ferrari</li>
<li *ngSwitchDefault>No car is selected.</li>
</ul>
//app.component.ts
car = 'bmw';
Output:
Here , as the value of the variable car changes, the matching element gets displayed .