{ "id": "guide/two-way-binding", "title": "Two-way binding", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Two-way bindinglink

\n

Two-way binding gives components in your application a way to share data.\nUse two-way binding to listen for events and update values simultaneously between parent and child components.

\n
\n

See the for a working example containing the code snippets in this guide.

\n
\n

Prerequisiteslink

\n

To get the most out of two-way binding, you should have a basic understanding of the following concepts:

\n\n
\n

Two-way binding combines property binding with event binding:

\n\n

Adding two-way data bindinglink

\n

Angular's two-way binding syntax is a combination of square brackets and parentheses, [()].\nThe [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (), as follows.

\n\n<app-sizer [(size)]=\"fontSizePx\"></app-sizer>\n\n\n

How two-way binding workslink

\n

For two-way data binding to work, the @Output() property must use the pattern, inputChange, where input is the name of the @Input() property.\nFor example, if the @Input() property is size, the @Output() property must be sizeChange.

\n

The following sizerComponent has a size value property and a sizeChange event.\nThe size property is an @Input(), so data can flow into the sizerComponent.\nThe sizeChange event is an @Output(), which allows data to flow out of the sizerComponent to the parent component.

\n

Next, there are two methods, dec() to decrease the font size and inc() to increase the font size.\nThese two methods use resize() to change the value of the size property within min/max value constraints, and to emit an event that conveys the new size value.

\n\nexport class SizerComponent {\n\n @Input() size: number | string;\n @Output() sizeChange = new EventEmitter<number>();\n\n dec() { this.resize(-1); }\n inc() { this.resize(+1); }\n\n resize(delta: number) {\n this.size = Math.min(40, Math.max(8, +this.size + delta));\n this.sizeChange.emit(this.size);\n }\n}\n\n\n

The sizerComponent template has two buttons that each bind the click event to the inc() and dec() methods.\nWhen the user clicks one of the buttons, the sizerComponent calls the corresponding method.\nBoth methods, inc() and dec(), call the resize() method with a +1 or -1, which in turn raises the sizeChange event with the new size value.

\n\n<div>\n <button (click)=\"dec()\" title=\"smaller\">-</button>\n <button (click)=\"inc()\" title=\"bigger\">+</button>\n <label [style.font-size.px]=\"size\">FontSize: {{size}}px</label>\n</div>\n\n\n\n

In the AppComponent template, fontSizePx is two-way bound to the SizerComponent.

\n\n<app-sizer [(size)]=\"fontSizePx\"></app-sizer>\n<div [style.font-size.px]=\"fontSizePx\">Resizable Text</div>\n\n\n

In the AppComponent, fontSizePx establishes the initial SizerComponent.size value by setting the value to 16.

\n\nfontSizePx = 16;\n\n\n

Clicking the buttons updates the AppComponent.fontSizePx.\nThe revised AppComponent.fontSizePx value updates the style binding, which makes the displayed text bigger or smaller.

\n

The two-way binding syntax is shorthand for a combination of property binding and event binding.\nThe SizerComponent binding as separate property binding and event binding is as follows.

\n\n<app-sizer [size]=\"fontSizePx\" (sizeChange)=\"fontSizePx=$event\"></app-sizer>\n\n\n

The $event variable contains the data of the SizerComponent.sizeChange event.\nAngular assigns the $event value to the AppComponent.fontSizePx when the user clicks the buttons.

\n
\n
Two-way binding in forms
\n

Because no native HTML element follows the x value and xChange event pattern, two-way binding with form elements requires NgModel.\nFor more information on how to use two-way binding in forms, see Angular NgModel.

\n
\n\n \n
\n\n\n" }