Angular2 entry-Data Binding and angular2 entry-level binding

Source: Internet
Author: User
Tags export class

Angular2 entry-Data Binding and angular2 entry-level binding
Too many rows too many rowsIntroduction

In Angular2, the data binding method is one-way by default. The data binding method can be divided:

1. Property binding and interpolation expression component class-> Template

2. Event binding: Template-> component class

3. Bidirectional binding: Template <-> component class

 

Zookeeper events zookeeper event binding

Event binding binds events in the template to methods in the component class. For example, the HTML code in a component is:

<P> <a (click) = "doClick ($ event)"> click me </a> </p>

 

(Click) indicates the operation to be performed. When a user clicks, The doClick method in the component class is executed.

export class BindComponent implements OnInit {  constructor() { }  ngOnInit() {  }  doClick(event: any){      console.log(event.target.innertext);  }}

 

▓ Attribute binding and interpolation expressions

In fact, property binding and interpolation expressions are the same thing, because when parsing code, interpolation expressions are converted to property binding, so you can use either of them

The following code serves the same purpose.

<! -- Interpolation expression -->  <! -- Property binding --> 

 

Property binding is divided into HTML property binding and DOM property binding. What is the difference between them? Let's look at an example.

<input type="text" value="hello" (input)="doInput($event)" />
  doInput(event: any){      console.log(event.target.value);      console.log(event.target.getAttribute('value'));  }

  

Browser display:

 

It can be seen that event.tar get. value is the obtained DOM attribute and is variable. Indicates the status of the current element.

Event.tar get. getAttribute ("value") obtains the HTML attribute, Which is immutable. Only initializes HTML elements and cannot be changed.

Note:

1. Some DOM attributes do not have HTML attributes mapped, and some HTML attributes do not have DOM attributes mapped.

2. The template is bound with DOM attributes.

 

 

HTML property binding
1. Bind basic HTML attributes

<Td [attr. colspan] = "expression"> </td>


2. css binding

<Div class = "a" [class] = "B"> </div> // B completely replaces a <div [class. a] = "fn ()"> </div> // fn () returns true and false if true is added. a <div [ngClass] = "{a: isA, B: isB}"> </div> // B completely replaces


3. Style binding

      <button [style.color]="a?red:green">button</button>      <button [ngStyle]="{'font-style':a?'red':'green'}">button</button>

 

 

Two-way binding can be performed from the component class-> template, or from the template-> component class

Example:

<input type="text" [(ngModel)]="name" (input)="doInput()" />
  private name: string = 'asdf';    doInput(){      setInterval(() => {          this.name = 'sdf';      },3000);  }

  

You can use [(ngModel)] to bind two-way data. First, modify the name in the input box to change the name value in the component class, which is a template group-> component class, the value of name is reset three seconds after the value is modified. It is a component class-> template.

 

  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.