Home > Article > Web Front-end > How to implement two-way data binding in Angular
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 <span style="font-family:NSimsun">[(ngModel)]</span>
, so can custom components implement two-way data binding? The answer is yes.
In Angular, we often need to pass square brackets <span style="font-family:NSimsun">[]</span>
and round brackets <span style="font-family:NSimsun">()</span>
Realize interaction between components:
Then in <span style="font-family:NSimsun">[]</span>## Based on # and
()<span style="font-family:NSimsun"></span>, how to implement two-way data binding of components?
Subcomponent:
<!--testDataBinding.component.html--> <h1>childStatus: {{childStatus}}</h1>
//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); } }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>
//app.component.ts import { Component,OnInit } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ parentStatus: boolean = true; ngOnInit(){ setTimeout(()=>{ this.parentStatus = true; },10000); } }In the parent component we initialize
parentStatus<span style="font-family:NSimsun"></span> to
true<span style="font-family:NSimsun"></span> and pass it to the child component
TestDataBindingComponent<span style="font-family:NSimsun"></span>.
In the child component, after 5 seconds we set childStatus<span style="font-family:NSimsun"></span> to
false<span style="font-family:NSimsun"></span> , see if it can be passed to the parent component. After another 5 seconds, we set
parentStatus<span style="font-family:NSimsun"></span> to
true<span style="font-family:NSimsun"></span> in the parent component to see if it can be passed to the child component.
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!