1. HTML
HTML is the "language" of the Angular template, except that the <script> element is disabled, and other HTML elements are supported.
2. Interpolation expressions
The syntax format for an interpolated expression is:{{...}}
An interpolation expression can be used to insert a computed string into HTML or as a property value.
3. Template Expressions
{{...}} is actually a template expression that Angular evaluates and translates into a string output.
template expressions are JavaScript-like languages, and many JavaScript expressions are legitimate template expressions, but not all.
The following JavaScript expressions are forbidden:
- An assignment expression (=,+=,-= ... ）
- New operator
- A join expression with or '
- Self-increment and decrement operations (+ + and--)
Other notable differences from JavaScript syntax include:
- Bitwise operators (| and &) are not supported
- The operator of the template expression, such as | and?. And so on, was given a new meaning.
4. Property BindingThe property bindings of a template can set the properties of a view element to a template expression.
set the attributes of an element:
set the properties of the directive:<div [ngclass]= "classes" >[ngclass] bound to classes properties </div>
set the properties of a custom component (this is an important way to communicate between parent and child components):
<user-detail [user]= "CurrentUser" ></user-detail>
5. HTML attributes (Attribute), class, and style bindings(1) Attribute binding
use the HTML Tag property (Attribute) binding when the element has no attributes to bind.
<table border=1> <tr><td [attr.colspan]= "1 + 1" >One-Two</td></tr> <tr> <td>Five</td><td>Six</td></tr></table>
(2) CSS class binding
CSS class bindings are syntactically similar to property bindings. But the part in square brackets is not the attribute name of an element, but includes a class prefix, followed by a dot (.), followed by the name of the CSS class. The latter two parts are optional. Example: [Class.class-name]
<!--standard HTML style class settings--><div class= "Bad Curly Special" >bad Curly special</div><!--by binding or overriding style class - -><div class= "Bad Curly Special" [class]= "badcurly" >bad curly</div><!--Add or remove special style classes through a property value-- ><div [class.special]= "isspecial" > This style is more special </div>
(3) style binding
style bindings allow you to set inline styles. Syntax:[Style.style-property]
<button [Style.color] = "isspecial?" Red ': ' Green ' > Red </button><button [style.background-color]=] cansave? ' Cyan ': ' Grey ' > Save </button> <!--style bindings with units--><button [style.font-size.em]= "Isspecial? 3:1 "> Big </button><button [style.font-size.%]="!isspecial? 150:50 "> Small </button>
6. Event BindingThe syntax for event binding is composed of the target event in the left parenthesis of the equals sign and the template declaration in the right quotation mark.
Note : The left parenthesis can also be used in the form of the on-prefix.
7. Bidirectional data binding with Ngmodelusing [(Ngmodel)] to implement a two-way binding example:
<input [(Ngmodel)]= "Currentuser.firstname" >
[] implements the data flow from the component to the template, () implements the data flow from the template to the component, the combination of the two [()] realizes two-way binding.
syntax using prefix form:<input bindon-ngmodel= "Currentuser.firstname" >
8. Built-in DirectivesAngular's built-in directives are Ngclass, Ngstyle, Ngif, ngfor, Ngswitch, etc.
(1) Ngclass
dynamically add or remove CSS classes by binding to Ngclass.
(2) Ngstyle
Ngstyle allows us to set many inline styles at the same time by binding it to the form of a Key:value control object.
Setstyles () {let styles = { //CSS property name ' Font-style ': this.cansave ? ' Italic ': ' normal ', //Italic ' font-weight ':!this.isunchanged? ' Bold ' : ' normal ', //Normal ' font-size ': this.isspecial ? ' 24px ' : ' 8px ', //24px }; return styles;}
by adding a Ngstyle property binding, let it call setstyles and set the style of the element accordingly:
<div [ngstyle]= "Setstyles ()" > the style of this div is italic, normal weight, and extra Large (24px). </div>
(3) ngif
by binding the ngif directive to a truth expression, you can add an element and its child elements to the DOM tree.
<div *ngif= "CurrentUser" >Hello,{{currentUser.firstName}}</div>
(4) Ngswitch
You need to ngswitch when you need to display one of the criteria from a set of possible element trees. Angular will only add the selected elements into the DOM. such as:
<span [ngswitch]= "UserName" > <span *ngswitchcase= "' Zhang San '" > Zhang San </span> <span * Ngswitchcase= "' John Doe '" > John Doe </span> <span *ngswitchcase= "' Harry '" > Harry </span> <span * Ngswitchcase= "' Zhao Liu '" > Zhao Liu </span> <span *ngswitchdefault> long da </span></span>
(5) Ngfor
ngfor instructions are required when you need to show a list of multiple entries.
<div *ngfor= "Let user of users" >{{user.fullName}}</div>
The ngfor directive supports an optional index index, which grows from 0 to the length in the array during the iteration.
<div *ngfor= "Let user of the users; let I=index" >{{i + 1}}-{{user.fullname}}</div>
(6) Ngfortrackby
ngfor directives sometimes have poor performance, especially in large lists. A small change, removal, or addition of an entry will result in cascading DOM operations.
solve this problem by tracing the function:
trackbyusers (Index:number, User:user) {return user.id}
then set the ngfortrackby instruction to the tracking function:
<div *ngfor= "let user of users; trackby:trackbyusers" > ({{user.id}}) {{user.fullname}}</div>
The trace function does not exclude all DOM changes. If the attribute that is used to determine whether the same contact is changed, the DOM element is updated, and the DOM element is left behind. The list interface becomes smoother and more responsive.
9. Template Reference VariablesA template reference variable is a reference to a DOM element or directive in a template.
<!--phone references the INPUT element and passes ' value ' to the event handle--><input #phone placeholder= "phone number" ><button (click) = "CA Llphone (Phone.value) >Call</button> <!--fax references the INPUT element and passes ' value ' to the event handle --><input Ref-fax placeholder= "Fax Number" ><button (click) = "Callfax (fax.value)" >Fax</button>
AngularJS2 template Syntax
