This article will take you through the structural directive pattern in Angular, introduce what the structural directive is and how to use it, I hope it will be helpful to you!
Front-end (vue) entry to mastery course: enter learning
In Angular , there are two types of directives. Attribute directives modify the appearance or behavior of DOM elements. Structural directives add or remove DOM elements.
Structural directives are one of the most powerful features in Angular , yet they are frequently misunderstood.
If you are interested in learning about structure directives, let’s read on and find out what they are, what they are used for and how to use them in your projects. [Recommended related tutorials: "angular tutorial"]
In this article, you will learn about Angular structural directive pattern. You'll know what they are and how to use them.
After studying this article, you will better understand these instructions and use them in actual projects.
Angular structural directives are directives that can change the structure of DOM . These instructions can添加、移除或者替换元素. Structural directives have a * symbol before their name.
In Angular , there are three standard structured directives.
*ngIf - Conditionally include a template based on the Boolean value returned by the expression (i.e. conditional rendering of the template)
*ngFor - iterate over an array
*ngSwitch - Renders each matching graph
Below is an example of a structured directive. The syntax looks like this:
<element ng-if="Condition"></element>
Conditional statements must be true or false .
<div *ngIf="worker" class="name">{{worker.name}}</div> Angular generates an <ng-template> element and then applies the *ngIf directive. This converts it to a property binding within square brackets [] , such as [ngIf] . The rest of <div> , including the class name, is inserted into <ng-template> . for example:
<ng-template [ngIf]="worker">
<div class="name">{{worker.name}}</div>
</ng-template> To use structural directives, we need to add an element with the directive in the HTML template. Then add, delete or replace elements based on the conditions or expressions we set in the directive.
Let's add some simple HTML code.
The content of the app.component.html file is as follows:
<div style="text-align:center"> <h1> Welcome </h1> </div> <h2> <app-illustrations></app-illustrations></h2>
*ngIf directive We use *ngIf to determine whether to display or remove an element based on conditions. ngIf is very similar to if-else .
The *ngIf directive removes HTML elements when the expression is false . When true , a copy of the element will be added to DOM .
The complete *ngIf code is as follows:
<h1> <button (click)="toggleOn =!toggleOn">ng-if illustration</button> </h1> <div *ngIf="!toggleOn"> <h2>Hello </h2> <p>Good morning to you, click the button to view</p> </div> <hr> <p>Today is Monday and this is a dummy text element to make you feel better</p> <p>Understanding the ngIf directive with the else clause</p>
*ngFor directive We use the *ngFor directive to iterate over the array. for example:
<ul>
<li *ngFor="let wok of workers">{{ wok }}</li>
</ul> Our component TypeScript file:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-illustrations',
templateUrl: './illustrations.component.html',
styleUrls: ['./illustrations.component.css']
})
export class IllustrationsComponent implements OnInit {
workers: any = [
'worker 1',
'worker 2',
'worker 3',
'worker 4',
'worker 5',
]
constructor() { }
ngOnInit(): void {
}
}*ngSwitch directiveTranslator added: This command is very useful in actual development
We use ngSwitch to decide which element to render based on different conditional statements. The *ngSwitch directive is very similar to switch statement we use. for example:
<div [ngSwitch]="Myshopping"> <p *ngSwitchCase="'cups'">cups</p> <p *ngSwitchCase="'veg'">Vegetables</p> <p *ngSwitchCase="'clothes'">Trousers</p> <p *ngSwitchDefault>My Shopping</p> </div>
In typescript :
Myshopping: string = '';
We have a MyShopping variable which has a default value and is used to render specific elements in the module that meet the conditions.
When the condition value is true , the relevant elements will be rendered into DOM , and the remaining elements will be ignored. If no element matches, the *ngSwitchDefault element is rendered into DOM .
If you want to add or remove an element from DOM , you should use structure directives. Of course, we can also use them to change element CSS styles, or add event listeners. You can even use them to create a new element that didn't exist before.
The best rule is: when we are thinking about manipulating the DOM, it's time to use structural directives .
Structural directives are an important part of Angular and we can use them in many ways.
I hope that through this article, readers can better understand how to use these instructions and when to use these modes.