ANGULAR2 Series Tutorial (ii) Template syntax

Today we are going to talk about ANGUALR2 template grammar, the official website is very clear, but I also use the easy-to-understand way to list it!

Example

Source

How to run:

Install NPM Run Play

Open port 8080. This example is my small demo, which introduces several commonly used template syntax.

Property bindings

No special instructions are required, just use [value], and not just value,[] can be the property of any common HTML element!

Src/app.html

<[value]= "FirstName"  [placeholder]= "Firstnameplaceholder" />

You can also use double curly braces:

Src/app.html

<value= "{{firstName}}"  placeholder= "{{ Firstnameplaceholder}} "/>

Where does the bound property come from? From the class we define:

Src/app.ts

firstname:string = ' Lewis ';

Event

You can listen to any HTML5 native element event in Angular2, just use this syntax: (eventName)

Src/app.html

<(click)= "dosomething ($event)"> click </  Button>

Where did dosomething come from? As with attribute FirstName, it is defined in the class:

Src/app.ts

dosomething ($event) {        console.log (' clicked on this button: ', $event. Target);    }

Bidirectional data binding

Just talking about one-way data binding, you can change the value of input to see if the other bindings will change. The answer is NO! This time we'll do two-way data binding:

Src/app.html

<type= "text"  [value]= "FirstName"  (input)= " Firstname= $event. Target.value "/>    <type=" text "  [(Ngmodel)]= "FirstName"/>

Use one-way binding to add the binding can, using [(Ngmodel)] can also! Then you change the value of input, and all bound FirstName values will change!

ANGULAR2 's bidirectional data binding does not use a "dirty check", but instead uses a zone.js. What kind of library is this?

A Zone is an execution context that persists across async tasks.

The library used to maintain the toggle context. A library used to replace the $apply (). Tell you when to update the view!

Local variables

A local variable # is a pointer to an object or DOM element, what does it mean? Look at the code:

Src/app.html

<!--phone refers to the input element, pass its ' value ' to an event handler -    <input#phone Placeholder= "Phone number">    <Button(click)= "Callphone (phone.value)">Pager</Button>    <!--Fax refers to the input element; pass it ' value ' to an event handler -    <inputVar-fax Placeholder= "Fax Number">    <Button(click)= "Callfax (fax.value)">Fax</Button>

Everything is in silence!

*Grammar and template tags

First look at the application of syntax and template tags:

<*ngif= "isActive"> I am a paragraph </p>

Equivalent

<[ngif]= "isActive"><p> I am a paragraph </ P ></ Template >

This code means that if IsActive is true, the P element is rendered.

The template tag declares a section of the DOM, which is instantiated after runtime.

Using template we can wrap a piece of Dom together, declare it, and decide whether to render them. Without rendering, the elements inside will not load and can save the operation. If you use div and hidden effects, the elements inside will have to be loaded, wasting the computation.

We also use the * syntax instead of the template tag. Play the same role.

The self-command with * Decoration also has: NgFor , NgIf , and NgSwitch。都是控制是否渲染的指令。我们用*来装饰后，就可以产生类似template的效果！

more Syntax

The above is only introduced the common syntax, there are more grammar reference can go directly to the official website

Tutorial source code and directory

If you feel that this blog tutorial has helped you, take a star!

Https://github.com/lewis617/angular2-tutorial

ANGULAR2 Series Tutorial (ii) Template syntax