What will you learn
In Angular, there are two types of directives.Attribute directiveModify the appearance or behavior of the DOM element.Structural instructionsAdd or remove DOM elements.
Structural instructionsIt is one of the most powerful features in Angular, yet they are frequently misunderstood.
If you are good at studyingStructural instructionsIf you are interested, then let's continue reading and understand what they are, what they are useful and how to use them in your project.
In this article, you will learn about Angular structure instruction patterns. You will know what they are and how to use them.
After learning this article, you will better understand these instructions and use them in real projects.
What is Angular structure directive?
Angular structure directives are instructions that can change DOM structures. These instructions can add, remove, or replace elements. Structural instructions have * symbols before their name.
In Angular, there are three standard structured instructions.
- *ngIf - conditionally contains a template (i.e. conditional rendering template) based on the boolean value returned by the expression
- *ngFor - traverse arrays
- *ngSwitch - Render each match is a graph
Below 👇 is an example of a structured instruction. The grammar looks like this:
<element ng-if="Condition"></element>
The conditional statement must be true or false.
<div *ngIf="worker" class="name">{{}}</div>
Angular generates an element of <ng-template> and applies the *ngIf directive. This converts it to property bindings in square brackets [], such as [ngIf]. The rest of <div>, containing the class name, is inserted into <ng-template>.
for example:
<ng-template [ngIf]="worker">
<div class="name">{{}}</div>
</ng-template>
How do Angular structure instructions work?
To use structure directives, we need to add an element with directives to the HTML template. Then add, delete or replace elements according to the conditions or expressions we set in the directive.
Examples of structure instructions
Let's add some simple HTML code.
The file contents are as follows:
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<h2> <app-illustrations></app-illustrations></h2>
How to use *ngIf command
We use *ngIf according to the criteria to determine the display or remove an element. ngIf is very similar to if-else.
When the expression is false, the *ngIf directive removes the HTML element. When true, a copy of the element is added to the 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>
How to use *ngFor command
We use the *ngFor directive to iterate through 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: './',
styleUrls: ['./']
})
export class IllustrationsComponent implements OnInit {
workers: any = [
'worker 1',
'worker 2',
'worker 3',
'worker 4',
'worker 5',
]
constructor() { }
ngOnInit(): void {
}
}
How to use *ngSwitch command
Translator adds: This instruction is very useful in actual development
We use ngSwitch to decide which element to render based on different condition declarations. The *ngSwitch directive is much like the 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 that has a default value for rendering specific elements in the module that meet the conditions.
When the condition value is true, the relevant elements will be rendered into the DOM and the remaining elements will be ignored. If no element matches, render the *ngSwitchDefault element into the DOM.
When do we need to use structural instructions in Angular?
If you want to add or remove an element in the DOM, you should use the structure directive. Of course, we can also use them to change the element CSS style, or add event listeners. You can even use them to create a new element that did not exist before.
The best rule is: when we are thinking about operating the DOM, then it's time to use the structure instructions.
Summarize
Structural directives are an important part of Angular and we can use them in a number of ways.
I hope that through this article, readers can better understand how to use these instructions and when to use these modes.
This article is a translation and adopts the form of a free translation. Original address:Angular Structural Directive Patterns – What They Are and How to Use Them
The above is the detailed explanation of the structure instruction mode and usage in Angular. For more information about Angular structure instruction mode, please pay attention to my other related articles!