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?

Examples are as follows.

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.

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.

Related articles:

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!