About the basic usage of built-in directives in Angular4-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

About the basic usage of built-in directives in Angular4

Jun 25, 2018 am 10:49 AM

angular built-in commands instruction

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 = [&#39;张三&#39;, &#39;李四&#39;, &#39;王五&#39;];
 
// .html
 
&lt;p class=&quot;ui list&quot; *ngFor=&quot;let username of userInfo&quot;&gt;
 &lt;p class=&quot;item&quot;&gt;{{username}}&lt;/p&gt;
&lt;/p&gt;

Copy after login

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
 
&lt;p *ngIf=&quot;false&quot;&gt;&lt;/p&gt;
&lt;p *ngIf=&quot;a &gt; b&quot;&gt;&lt;/p&gt;
&lt;p *ngIf=&quot;username == &#39;张三&#39;&quot;&gt;&lt;/p&gt;
&lt;p *ngIf=&quot;myFunction()&quot;&gt;&lt;/p&gt;

Copy after login

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
 
&lt;p class=&quot;container&quot; [ngSwitch]=&quot;myAge&quot;&gt;
 &lt;p *ngSwitchCase=&quot;&#39;10&#39;&quot;&gt;age = 10&lt;/p&gt;
 &lt;p *ngSwitchCase=&quot;&#39;20&#39;&quot;&gt;age = 20&lt;/p&gt;
 &lt;p *ngSwitchDefault=&quot;&#39;18&#39;&quot;&gt;age = 18&lt;/p&gt;
&lt;/p&gt;

Copy after login

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 = &#39;red&#39;;
 
// .html
&lt;p [style.color]=&quot;yellow&quot;&gt;
 你好，世界
&lt;/p&gt;
&lt;p [style.background-color]=&quot;backColor&quot;&gt;
 你好，世界
&lt;/p&gt;
&lt;p [style.font-size.px]=&quot;20&quot;&gt;
 你好，世界
&lt;/p&gt;
&lt;p [ngStyle]=&quot;{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}&quot;&gt;
 你好，世界
&lt;/p&gt;

Copy after login

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
&lt;p [ngClass]=&quot;{bordered: isBordered}&quot;&gt;
 是否显示边框
&lt;/p&gt;

Copy after login

Explanation:

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
 
&lt;p ngNonBindable&gt;
 {{我不会被绑定}}
&lt;/p&gt;

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn