About the basic usage of built-in directives in Angular4

The following article mainly introduces you to the basic usage of built-in instructions in Angular4. The article introduces it in detail through sample code. Friends who need it can take a look below.

I have to say that instructions are one of the most powerful functions of ng. Well, you can also remove one of them. It is the most powerful function.

Preface

Everyone knows that ng has many built-in custom instructions, which prevents us from reinventing the wheel ourselves. At the same time, ng also provides the function of custom instructions, which can make our page element tags more instantiated.

In this article, we will list the usage of each built-in command separately and provide an example as a demonstration. Try to use the least and simplest description so that you can learn the basic usage of each built-in command faster and more accurately.

ngFor

Function: Like a for loop, you can repeatedly take values ​​from the array and display them.

Example:

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<p class="ui list" *ngFor="let username of userInfo">
 <p class="item">{{username}}</p>
</p>

Explanation:

His syntax is *ngFor="let username of userInfo", where userInfo is the array from which values ​​are taken, and username is the value taken out from it each time. Then the content in this tag will be executed repeatedly, and the username will be displayed through two-way binding.

ngIf

Function: Decide whether to show or hide this element based on conditions.

Example:

// .html

<p *ngIf="false"></p>
<p *ngIf="a > b"></p>
<p *ngIf="username == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>

Explanation:

• Never displayed

• Displayed when a is greater than b

• Displayed when username is equal to Zhang San

• Decide whether to display or not based on the return value of myFunction() function

ngSwitch

Function: Prevent complex conditions from causing excessive use of ngIf.

Example:

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>

Explanation:

[ngSwitch] Bind to the target first, ngSwitchCase lists each possibility, and ngSwitchDefault lists the default value.

ngStyle

Function: You can use dynamic values ​​to set CSS properties for specific DOM elements.

Example:

// .ts
backColor: string = 'red';

// .html
<p [style.color]="yellow">
 你好，世界
</p>
<p [style.background-color]="backColor">
 你好，世界
</p>
<p [style.font-size.px]="20">
 你好，世界
</p>
<p [ngStyle]="{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}">
 你好，世界
</p>

Explanation:

• Set the color directly to yellow.

• Set the background color to backColor, and modify the value of backColor in the .ts file.

• Set the font size. It should be noted that if you only write font-size, an error will be reported. You must add .px at the end. Of course .em .% are all acceptable.

• The first three are to set only one. You can write multiple ones at the same time by writing [ngStyle], and use curly brackets to enclose the inner strength. It should be noted that the hyphen - is not allowed to appear in the key name of the object. If you use background-color, etc., you need to add single quotes.

ngClass

Function:Dynamicly set and change the content of a given DOM element CSS class.

Example:

// .scss
.bordered {
 border: 1px dashed black;
 background-color: #eee;
}

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>

Explanation:

Setting the style in

• scss is equivalent to you building a class="bordered".

• #ts has a new isBordered, which is used to determine whether to display the styles in .scss.

• #html uses isBordered as the basis for judging whether bordered is displayed.

ngNonBindable

##Function: Tell Angular not to bind a certain part of the page.

Example:

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>

Explanation:

When ngNonBindable is used, the curly braces will be displayed together as a string.

Summary

In daily development, ngFor and ngIf should be used the most, so they are written first. As for ngNonBindable, I have never used it once in actual development. I just checked the information and tested it before writing it down.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to disable template caching in AngularJs

How to clear the browser cache in angularJs

The above is the detailed content of About the basic usage of built-in directives in Angular4. For more information, please follow other related articles on the PHP Chinese website!