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

ngFor

Function: Like a for loop, it can be repeatedly evaluated from an array and displayed.

Example:

//.ts this.userInfo = [' userInfo ', 'userInfo ',' userInfo ']; // .html <div class="ui list" *ngFor="let username of userInfo"> <div class="item">{{username}}</div> </div>Copy the code

*ngFor=”let username of userInfo” *ngFor=”let username of userInfo” *ngFor=”let username of userInfo” Then the contents of the tag are repeated and the username is displayed by bidirectional binding.

ngIf

Effect: Determines whether to show or hide this element based on the condition.

Example:

/ /. The HTML < div * ngIf = "false" > < / div > < div * ngIf = "of" a > b > < / div > < div * ngIf = "username = = '* *'" > < / div > < div *ngIf="myFunction()"></div>Copy the code

Explanation:

  1. Never show
  2. Display when a is greater than B
  3. Display if username is equal to 3
  4. Display according to the return value of myFunction()

ngSwitch

Function: Prevents complex conditions from causing excessive ngIf usage.

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>
Copy the code

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

ngStyle

What it does: You can use dynamic values to assign CSS attributes to specific DOM elements.

Example:

// .ts backColor: string = 'red'; <div > <div > <div [style. Background-color]="backColor"> <div > <div [style.font-sides.px]="20"> </div> <div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size. Px ': '20'}"> Hello, world </div>Copy the code

Explanation:

  1. Set the color to yellow.
  2. Set the background color to backColor and modify the value of backColor in the.ts file.
  3. To set the font size, note the followingFont size alone will return an error and must be followed by.px.Of course.em.% is ok.
  4. [ngStyle] [ngStyle] [ngStyle] [ngStyle] [ngStyle] One thing to noteA hyphen -Is not allowed to appear in the key name of the object, background-color, etc. must be quoted.

ngClass

Function: Dynamically sets and changes the CSS class of a given DOM element.

Example:

// .scss .bordered { border: 1px dashed black; background-color: #eee; } // .ts isBordered: boolean = true; //.html <div [ngClass]="{bordered: isBordered}"> Whether to display borders </div>Copy the code

Explanation:

  • So SCSS sets a style, you’ve created a class=”bordered”.
  • A new isBordered object is created in ts to determine whether the style in.scss is displayed.
  • In HTML, isBorderedBordered whether to displayOn the basis of judgment.

ngNonBindable

Action: Tells Angular not to bind a part of the page.

Example:

.html <div ngNonBindable> {{I will not be bound}} </div>Copy the code

Explanation: With ngNonBindable, curly braces are displayed as strings.

conclusion

NgFor and ngIf are used most often in daily development, so they are written first. As for ngNonBindable, I didn’t use it once in the actual development, but also checked the data to test it. 😓

If you like it, give it a thumbs up. If you have any questions, leave a comment below.