Approach 2
In this approach, we will provide two strings in the input and perform two-way binding of the variables using the contact() function. To bind the data in Angular, we will call the function to perform their concatenation and display the result.
Example: This example illustrates the basic implementation of Two-Way Data Binding in Angular by concatenating the 2 strings.
HTML
<!-- app.component.html --> < h2 style = "color: green" > w3wiki </ h2 > < h2 > How to Achive Two-Way Data Binding in Angular with ngModel ? </ h2 > < input [(ngModel)]="val1" placeholder = "Value 1" /> < input [(ngModel)]="val2" placeholder = "Value 2" /> < button (click)="concat()"> Concatenate </ button > < p > Your Concatenation is: < b style = "color: green;" > {{ result }} </ b > </ p > |
Javascript
// app.component.ts import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , }) export class AppComponent { val1: string = "" ; val2: string = "" ; result: string = "" concat() { this .result = ( this .val1) + this .val2 } } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { FormsModule } from '@angular/forms' import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
How to achieve Two-Way Data Binding in Angular with ngModel ?
Two-way Data Binding in Angular allows you to automatically synchronize data between a component class property and an input element (e.g., an input field) in your template. To achieve this binding, it’s typically used with Angular [(ngModel)] directive. This is basically the combination of the Property Binding & the Event Binding, which helps to communicate in a two-way manner between the property in the component and a user interface element, such as an input field.
In this article, we will learn how to achieve Two-Way Data Binding in Angular with ngModel, along with understanding their implementation through the illustrations.