Deep understanding of Angular2 template Syntax _angularjs

1. Notes

The Angular2 template is used to show the appearance of the component, and as a view, the usage is basically consistent with the HTML syntax, and the simplest Angular2 template is a piece of HTML code. The angular template syntax consists mainly of the following sections:

L Direct Binding

L Interpolation expression

L Property Bindings

L Event Binding

L Bidirectional Binding

L Style Binding

L Templates and *

L Local Variables

First look at a template example, as follows:

Import {Component, OnInit} from ' @angular/core '; @Component {selector: ' Ui-demo ', Template: ' <form class= ' form-horizontal ' role= ' form ' > <div class= ' Form-group "> <legend title=" form ">title</legend> </div> <span class=" label label-warning " >attention:{{msg}}</span> <div class= "Input-group" > <div class= "Input-group-addon" >name</
div> <input type= "text" class= "Form-control" id= "name" name= "name" [attr.size]= "Size" [placeholder]= "Name" > </div> <div class= "Input-group" > <div class= "Input-group-addon" >age</div> <input type= " Text ' class= ' form-control (change) = ' Change () ' id= ' age ' name= ' age ' [placeholder]= ' age ' > </div> <div class= "Input-group" > <div class= "Input-group-addon" >sex</div> <input type= "text" class= "Form-control" [ Ngmodel)]= "sex" id= "sex" name= "sex" [placeholder]= "Sex" > </div> <div class= "Input-group" *ng-if= "Needpwd" > <div class= "Input-grouP-addon ">pwd</div> <input #inPwd type=" password "class=" Form-control "[(Ngmodel)]=" pwd "id=" pwd "" name= " PWD "> <button type=" button "class=" Btn btn-warning "(click) =" Show (inpwd.value) ">warn</button> </ div> <div class= "Form-group" > <div class= "col-sm-10 col-sm-offset-2" [style.color]= "Color" > <button Type= "Submit" class= "btn btn-primary" [class.btn-primary]= "Isprimary" >Submit</button> </div> </ Div> </form> '}) Export class Templatedemocomponent implements OnInit {msg:string = "considerations"; name:string = "Nam
E ";
Size:number = 4;
Age:number = 15;
sex:string = ' Male ';
Needpwd:boolean = true;
pwd:string = ';
color:string = "Red";
Isprimary:boolean = true; Constructor () {} ngoninit () {} change () {} show ($event) {console.log ($event);}}

1.1 Direct binding

Bind a string directly to the corresponding property, such as binding a string form to the title property

<legend title= "Form" >title</legend>

1.2 Interpolation expression

The interpolation expression is represented by {{}}, and the value of the corresponding expression in the component is bound to the template for display, for example, to display the value of the MSG expression in the assembly

<span class= "Label label-warning" >attention:{{msg}}</span>

1.3 Property Bindings

Property bindings are represented by [], binding the value of an expression to the corresponding property, for example, binding the value of the name expression in the component to the property placeholder

<div class= "Input-group" >
<div class= "Input-group-addon" >name</div>
<input type= " Text "class=" Form-control "id=" name "name=" name "[placeholder]=" name ">
</div>

When there are corresponding properties in the elements of the attribute binding, you can bind it directly with [XX], but when there is no corresponding property on the element, you must use [attr.xxx] to bind the corresponding property information in such a way that ATRR adds a point.

<div class= "Input-group" >
<div class= "Input-group-addon" >name</div>
<input type= " Text "class=" Form-control "id=" name name= "name" [attr.size]= "Size" [placeholder]= "name" >
</div>

1.4 Style Bindings

Style bindings consist primarily of two convenient, inline style style and external style class bindings.

1.4.1 Style Binding

Style bindings are syntactically similar to property bindings. But the part in the square brackets is not the attribute name of an element, but includes a style prefix followed by a point (.) followed by a CSS style property name. Represents the use of this property on a specified element, in the form of: [Style.style-perporty]. For example

<div class= "Form-group" >
<div class= "col-sm-10 col-sm-offset-2" [style.color]= "Color" >
< Button type= "Submit" class= "btn btn-primary" [class.btn-primary]= "Isprimary" >Submit</button>
</ Div>
</div>

1.4.2 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 point (.) followed by the name of the CSS class, in the form of: [Class.class-name]. Indicates whether the CSS class is used on the element or if the CSS class is removed, and the following value is true to use the table, false to indicate the removal

<div class= "Form-group" >
<div class= "col-sm-10 col-sm-offset-2" [style.color]= "Color" >
< Button type= "Submit" class= "btn btn-primary" [class.btn-primary]= "Isprimary" >Submit</button>
</div >
</div>

1.5 * and <template>

First, let's look at A * and <template> example,

<div class= "Input-group" *ng-if= "needpwd" >
<div class= "Input-group-addon" >pwd</div>
<input type= "Password" class= "Form-control" [(Ngmodel)]= "pwd" id= "pwd" name= "pwd" >
</div>

* is a syntactic sugar that makes it easier to read and write instructions that need to modify HTML layouts with the help of templates. Ngfor, Ngif, and ngswitch Add or remove element subtrees, which are wrapped in <template> tags. Using the * prefix syntax let's ignore the <template> tag, and the restored code looks like this

<template [ngif]= "Needpwd" >
<div class= "Input-group" >
<div class= "Input-group-addon" > pwd</div>
<input type= "password" class= "Form-control" [(Ngmodel)]= "pwd" id= "pwd" name= "pwd" >
</div>
</template>

1.6 Local Variables

A local variable is represented by a #xxx, which can be used on an element to represent the element, and can be used in the same element, sibling element, or any child element. As shown below, you can use this variable on the sibling node to represent the element

<div class= "Input-group" *ng-if= "needpwd" >
<div class= "Input-group-addon" >pwd</div>
<input #inPwd type= "password" class= "Form-control" [(Ngmodel)]= "pwd" id= "pwd" name= "pwd" > <button type=
"Button" class= "Btn btn-warning" (click) = "Show (inpwd.value)" >warn</button>
</div>

1.7 Event Binding

Property bindings are represented by (), binding the method of a component to the corresponding event, for example, binding the change function to a changing event, which triggers the changes function.

<div class= "Input-group" >
<div class= "Input-group-addon" >age</div>
<input type= "text ' Class= ' form-control (change) = ' Change () ' id= ' age ' name= ' age ' [placeholder]= ' age ' >
</div>

1.8 Bidirectional binding

Bidirectional bindings are expressed by using [()], which is a combination of attribute binding and event binding. The most common two-way bindings are used in the form using [(Ngmodel)]= "xxx", and modifying the data in the form modifies the bound data item. As follows: When the form input is modified, the sex variable is also synchronized

<div class= "Input-group" >
<div class= "Input-group-addon" >sex</div>
<input type= " Text "class=" Form-control [(Ngmodel)]= "sex" id= "sex" name= "sex" [placeholder]= "Sex" >
</div>

The above is a small set to introduce the ANGULAR2 template grammar related knowledge, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!