The basic usage of built-in commands in Angular4 and angular4

The basic usage of built-in commands in Angular4 and angular4

Preface

As we all know, ng has many built-in custom commands, which prevents us from building our own wheels. At the same time, ng also provides the function of custom commands to make our page element labels more instantiated.

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

NgFor

Purpose: Like a for loop, you can repeat the values in the array and display them.

Example:

//. Tsthis. userInfo = ['zhang san', 'Li si', 'wang wu']; //. html <div class = "ui list" * ngFor = "let username of userInfo"> <div class = "item" >{{ username }}</div> </div>

Explanation:

His syntax is*ngFor="let username of userInfo"UserInfo is the array from which values are taken, and username is the value obtained from each operation. Then, the content in the tag will be repeated and the username will be displayed through two-way binding.

NgIf

Purpose:Determine whether to display or hide this element based on the conditions.

Example:

//. Html <div * ngIf = "false"> </div> <div * ngIf = "a> B"> </div> <div * ngIf = "username = 'zhangsan '"> </div> <div * ngIf =" myFunction () "> </div>

Explanation:

• Never show
• When a is greater than B
• When username is equal to Michael jacob
• Determines whether to display the value based on the return value of the function myFunction ().

NgSwitch

Purpose:Prevent excessive use of ngIf due to complicated conditions.

Example:

// .html<div class="container" [ngSwitch]="myAge"> <div *ngSwitchCase="'10'">age = 10</div> <div *ngSwitchCase="'20'">age = 20</div> <div *ngSwitchDefault="'18'">age = 18</div></div>

Explanation:

[NgSwitch] binds the target first. ngSwitchCase lists every possibility, and ngSwitchDefault lists the default values.

NgStyle

Purpose:You can use dynamic values to set CSS attributes for specific DOM elements.

Example:

//. TsbackColor: string = 'red ';//. html <div [style. color] = "yellow"> Hello, world </div> <div [style. background-color] = "backColor"> Hello, world </div> <div [style. font-size.px] = "20"> Hello, world </div> <div [ngStyle] = "{color: 'white', 'background-color': 'blue ', 'font-size. px ': '20'} "> Hello, world </div>

Explanation:

• Set the color to yellow.
• Set the background color to backColor and modify the value of backColor in the. ts file.
• Set the font size. Note that an error is reported when writing only font-size, and. px must be added to the end. Of course. em. % is acceptable.
• You can set only one of the first three types. You can write multiple types of [ngStyle] at the same time and use curly brackets to enclose the internal functions. It should be noted that the hyphen (-) is not allowed to appear in the key name of the object. If background-color is used, single quotation marks must be added.

NgClass

Purpose:Dynamically set and change the CSS class of a given DOM element.

Example:

//. Scss. bordered {border: 1px dashed black; background-color: # eee ;}//. tsisBordered: boolean = true ;//. html <div [ngClass] = "{bordered: isBordered}"> show borders </div>

Explanation:

• Scss sets a style, which is equivalent to creatingclass="bordered".
• A new isBordered is created in ts to determine whether to display the style in. scss.
• In html, isBordered is used as the basis for determining whether bordered is displayed.

NgNonBindable

Purpose:Tell Angular not to bind a part of the page.

Example:

. Html <div ngNonBindable >{{ I won't be bound }}</div>

Explanation:

With ngNonBindable, curly braces are displayed as strings.

Summary

In daily development, ngFor and ngIf should be the most, so they are written in front. As for ngNonBindable, I have never used it in actual development. I also wrote it down by checking the materials and testing it.

Well, the above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, you can leave a message, thank you for your support.