What are structural directives in Angular? how to use?

This article will take you to understand the structural instruction mode in Angular, and introduce what the structural instruction is and how to use it. I hope it will be helpful to everyone!

In Angular, there are two types of directives. Attribute directivesModify the appearance or behavior of the DOM element. Structural directivesAdd 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 structural directives, then let’s continue reading now and understand what they are, what they are used for and how to use them in your projects. [Related tutorial recommendations: "angular tutorial"]

What will you learn

In this article, you will learn aboutAngular Knowledge points of 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.

What are Angular structural directives?

Angular Structural directives are directives that change the structure of the DOM. These instructions can add, remove or replace elements. Structural directives have the * symbols before their names.

In Angular, there are three standard structured directives.

• *ngIf - Conditionally include a template (i.e. conditional rendering template) based on the Boolean value returned by the expression
• *ngFor - Traverse the array
• *ngSwitch - Render each matching is graph

Below? is an example of a structured directive. The syntax looks like this:

 <element ng-if="Condition"></element>

The conditional statement must be true or false.

<div *ngIf="worker" class="name">{{worker.name}}</div>

Angular Generates an element with <ng-template> and then applies the *ngIf directive. This converts it to a property binding within square brackets [], such as [ngIf]. The remainder 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>

How do Angular structural directives work?

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.

Example of structural directive

We add some simple HTML code.

app.component.html The file content is as follows:

<div style="text-align:center">
  <h1>
    Welcome 
  </h1>
</div>
<h2> <app-illustrations></app-illustrations></h2>

How to use the *ngIf command

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 the HTML element when the expression is false. When true, a copy of the element will be 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 the *ngFor command

us Use the *ngFor directive to iterate over the array. For example:

<ul>

    <li *ngFor="let wok of workers">{{ wok }}</li>

</ul>

Our componentTypeScript 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 {
  }

}

How to use*ngSwitch Command

Translator 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 the switch statement we use. For example:

<div [ngSwitch]="Myshopping">
  <p *ngSwitchCase="&#39;cups&#39;">cups</p>
  <p *ngSwitchCase="&#39;veg&#39;">Vegetables</p>
  <p *ngSwitchCase="&#39;clothes&#39;">Trousers</p>
  <p *ngSwitchDefault>My Shopping</p>
</div>

In typescript:

Myshopping: string = '';

We have a MyShopping variable which has a default value for rendering in the module A specific element that satisfies the condition.

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 element of *ngSwitchDefault is rendered into DOM.

When do we need to use structural directives in Angular?

If you want to add or remove an element from DOM, you should use the structure directive. 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, then it is time to use structural directives.

Summary

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.

This article is a translation, in the form of free translation.

Original address: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are structural directives in Angular? how to use?. For more information, please follow other related articles on the PHP Chinese website!