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 .
Similar Reads
Structural Directives in Angular
Structural directives are responsible for the Structure and Layout of the DOM Element. It is used to hide or display the things on the DOM. Structural Directives can be easily identified using the '*'. Every Structural Directive is preceded by a '*' symbol.Some of the Build in Structural Directives
3 min read
Built-in directives in Angular
Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (cus
5 min read
Angular 17 Structural Directives
Structural directives in Angular 17 are a special type of directives that allow you to dynamically manipulate the DOM (Document Object Model) by adding, removing, or replacing elements based on certain conditions. These directives are prefixed with an asterisk (*) in the template syntax. In this art
5 min read
Recursion in Angular Directives
Recursion in Angular directives refers to the ability of a directive to include instances of itself within its template. This allows for the creation of nested structures and dynamic rendering based on the data. Recursive directives are useful when dealing with hierarchical data or tree-like structu
4 min read
What is a custom directive in Angular?
Angular, a popular framework for building dynamic web applications, offers a powerful feature known as custom directives. These directives extend the functionality of HTML elements, enabling to create reusable components and add behavior to their applications. In this article, we'll learn about the
4 min read
Attribute Directives in Angular
Attribute directives are a powerful tool that allows you to manipulate the behavior and appearance of HTML elements. In this article, you will see the fundamentals of attribute directives. Table of Content What are Attribute Directive?Benefits of Attribute DirectiveTypes of Attribute DirectivesSteps
5 min read
AngularJS ng-src Directive
The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce
2 min read
AngularJS ng-style Directive
The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep
2 min read
AngularJS input Directive
In this article, we will see how the input Directive in AngularJS can be utilized to change the default behavior of <input> elements. This can be done with the help of the ng-model attribute present inside the <input> element. <input> is an HTML tag that is used to get user data us
2 min read
What are Directives in AngularJS ?
AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM mat
7 min read