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?

Subcomponent:

 
childStatus: {{childStatus}}

//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); } }

Parent component:

  
parentStatus: {{parentStatus}}

//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); } }

parentStatus totrue and pass it to the child componentTestDataBindingComponent.

In the child component, after 5 seconds we setchildStatus tofalse , see if it can be passed to the parent component. After another 5 seconds, we setparentStatus totrue 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!