Detailed explanation of angular two-way binding

Bidirectional binding principle
ngModel

Rendering

Custom two-way binding properties

Component-html
Component-ts
External use
Rendering

Summarize

Bidirectional binding principle

Two-way binding combines property binding with event binding.

Angular's two-way binding syntax is a combination of square brackets and parentheses [()].

[] is used for property binding, and () is used for event binding.

The naming rule is [input name] + Change.

Property Binding ( Input ) - Sets a specific element attribute.
Event Binding ( Output -output) − Listens for element change events.

Therefore, there are ngModel and ngModelChange in the form two-way binding, and you can also customize the two-way binding properties.

ngModel

Two-way binding to form elements

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
    </div>
  `
})
export class BindComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

Rendering

Custom two-way binding properties

Component-html

<div>
  <div>inner: {{ value }}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

Component-ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
  // Set input properties @Input() value!: string;
  // Set output event @Output() valueChange: EventEmitter<string> = new EventEmitter();
  constructor() { }
  ngOnInit(): void { }
  onInput(value: string){
    // Trigger output event - output data this.valueChange.emit(value);
  }
}

External use

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-outer',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(value)]="name"></app-inner>
    </div>
  `
})
export class OuterComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

Rendering

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of two methods to implement two-way binding of custom components in Angular
Solve the problem that angular two-way binding has no effect and ng-model cannot be displayed normally
Solve the problem that [(ngModel)] cannot be used in angular2 when two-way data binding
AngularJS two-way data binding principle: application of $watch, $apply and $digest
An example of implementing two-way data binding with Angular custom components
A brief discussion on the principle of two-way binding in AngularJs (data binding mechanism)

<<: CSS3 filter (filter) to achieve the sample code of gray or black mode of web page

>>: Linux system calls for operating files