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.
Contact Us