Example Analysis of two-way binding of angular

This article mainly shows you the "sample analysis of angular two-way binding", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of angular two-way binding".

Two-way 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 [()].

[] perform attribute binding and () perform event binding.

The name rule is [input name] + Change.

Attribute binding (@ Input- input)-sets specific element attributes.

Event binding (@ Output- output)-listens for element change events.

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

NgModel

Bidirectional binding to form elements

Import {Component, OnInit} from'@ angular/core';@Component ({selector: 'app-bind', template: `Name: {{name}} `}) export class BindComponent implements OnInit {name ='; constructor () {} ngOnInit (): void {}} effect

Custom bidirectional binding attribute component-html inner: {{value}} component-tsimport {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 the input attribute @ Input () valuekeeper: string / / set output event @ Output () valueChange: EventEmitter = 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: `Name: {{name}} `}) export class OuterComponent implements OnInit {name ='; constructor () {} ngOnInit (): void {}} effect

The above is all the content of the article "sample Analysis of angular two-way binding". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!