How to implement two-way data binding in Angular-JS Tutorial-php.cn

How to implement two-way data binding in Angular

亚连

Release： 2018-06-21 16:58:11

Original

1474 people have browsed it

The editor below will share with you an example of two-way data binding using Angular custom components. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

Students who have studied Angular all know that the input box implements two-way data binding through [(ngModel)] , so can custom components implement two-way data binding? The answer is yes.

In Angular, we often need to pass square brackets [] and round brackets ()Realize interaction between components:

Then in []## Based on # and (), how to implement two-way data binding of components?

Examples are as follows.

Subcomponent:

<!--testDataBinding.component.html-->

<h1>childStatus: {{childStatus}}</h1>

Copy after login

//testDataBinding.component.ts

export class TestDataBindingComponent implements OnInit{
 @Input() childStatus;
 @Output() childStatusChange = new EventEmitter();
 ngOnInit(){
 setTimeout(()=>{
  this.childStatus = false;
  this.childStatusChange.emit(this.childStatus);
 },5000);
 }
}

Copy after login

Pay attention to the writing here, this is the key, the first half of the output attribute must be the same as the input attribute, the input attribute You can name it arbitrarily. The output attribute needs to add Change to the input attribute. For example, if your input attribute is myData, then the output attribute must be myDataChange.

Parent component:

<!--app.component.html-->

<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>parentStatus: {{parentStatus}}</h1>

Copy after login

//app.component.ts

import { Component,OnInit } from &#39;@angular/core&#39;;
@Component({
 selector: &#39;my-app&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent implements OnInit{
 parentStatus: boolean = true;
 ngOnInit(){
 setTimeout(()=>{
  this.parentStatus = true;
 },10000);
 }
}

Copy after login

In the parent component we initialize

parentStatus to true and pass it to the child component TestDataBindingComponent.

In the child component, after 5 seconds we set childStatus to false , see if it can be passed to the parent component. After another 5 seconds, we set parentStatus to true in the parent component to see if it can be passed to the child component.

It turns out that after the value of the child component changes, the value of the parent component also changes; after the value of the parent component changes, the value of the child component also changes!

We have implemented two-way binding!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement dynamic loading of histograms in angularjs

How to use scope in Angular scope

How to implement menu permission control using react

Detailed explanation of how props pass parameters in vue.js

The above is the detailed content of How to implement two-way data binding in Angular. For more information, please follow other related articles on the PHP Chinese website!