Structural Directives
Structural directives are responsible for manipulating the DOM layout by adding, removing, or manipulating elements based on conditions. They are denoted by an asterisk (*) preceding the directive name and are commonly used to alter the structure of the DOM based on conditions. Examples include , , and ngSwitch.
Built-in Attribute Directives:
1. ngIf: The ngIf directive conditionally includes or removes an element based on a provided expression.
Syntax:
<element *ngIf="condition">
<!-- Content to display when condition is true -->
</element>
2. ngFor: The ngFor directive iterates over a collection and instantiates a template once for each item in the collection.
Syntax:
<element *ngFor="let item of items">
<!-- Content to repeat for each item -->
</element>
3. ngSwitch: The ngSwitch directive is similar to a switch statement in programming languages. It displays one element from a set of elements based on a provided expression.
Syntax:
<element [ngSwitch]="expression">
<element *ngSwitchCase="value1"> <!-- Content for case 1 -->
</element>
<element *ngSwitchCase="value2"> <!-- Content for case 2 -->
</element>
<!-- More ngSwitchCase elements for other cases -->
<element *ngSwitchDefault> <!-- Default content -->
</element>
</element>
Example:
<!-- app.component.html -->
<div class="container">
<h1 class="title">w3wiki</h1>
<div class="content">
<div *ngIf="isLoggedIn" class="message">
Welcome to {{ username }}!
</div>
<ul *ngIf="items.length > 0" class="list">
<li *ngFor="let item of items" class="list-item">
{{ item }}
</li>
</ul>
<div [ngSwitch]="color" class="color-switch">
<p *ngSwitchCase="'red'" class="color-message">Red color selected</p>
<p *ngSwitchCase="'blue'" class="color-message">Blue color selected</p>
<p *ngSwitchCase="'green'" class="color-message">Green color selected</p>
<p *ngSwitchDefault class="color-message">Please select a color</p>
</div>
</div>
</div>
/* app.component.css */
.container {
text-align: center;
}
.title {
color: green;
}
.content {
margin-top: 20px;
}
.message {
font-size: 20px;
color: green;
margin-bottom: 20px;
}
.list {
list-style-type: none;
padding: 0;
}
.list-item {
font-size: 16px;
margin-bottom: 5px;
}
.color-switch {
margin-top: 20px;
}
.color-message {
font-size: 18px;
margin-top: 10px;
}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLoggedIn: boolean = true;
username: string = 'GFG';
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
color: string = 'red';
}
Output:
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 (custom-directive).
There are basically 3 types of directives and each type has some built-in directives. In this article, we will discuss all 3 types of directives and their built-in directives.
Table of Content
- 1. Component Directives
- 2. Attribute Directives
- 3. Structural Directives