Must to know, how to do two way binding in Angular and pass value to another function

In Angular, two-way binding allows you to synchronize the data between a component’s property and an input field in the template. This means that changes made to the input field in the template are reflected in the component’s property, and vice versa. Two-way binding is commonly achieved using the ngModel directive, which is provided by the FormsModule or ReactiveFormsModule modules.

Here’s how you can implement two-way binding in Angular and pass the value to another function:
1. Import the FormsModule or ReactiveFormsModule: Ensure that you have imported the FormsModule or ReactiveFormsModule in your Angular module where your component is declared. You need to import FormsModule if you are using ngModel for two-way binding.

import { FormsModule } from '@angular/forms';

2. Use ngModel for Two-Way Binding: In your component’s template (usually an HTML file), use ngModel to bind the value of an input field to a component property. Here’s an example:

<input type="text" [(ngModel)]="myValue" (ngModelChange)="onChange()">

In this example, myValue is the component property you want to bind, and onChange() is the function you want to call whenever the value changes.

3. Define the Component Property and Function: In your component class (usually a TypeScript file), define the property and the function:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  myValue: string;

  onChange() {
    // Do something with myValue
    console.log('Value changed:', this.myValue);
    // You can pass this value to another function if needed
    this.anotherFunction(this.myValue);
  }

  anotherFunction(value: string) {
    // Function to handle the value passed from onChange()
    console.log('Value passed to another function:', value);
  }
}

1. In this example, myValue is the property bound to the input field, and onChange() is the function called whenever the value changes. Inside onChange(), you can perform any necessary operations with myValue, and then pass it to anotherFunction() if needed.

That’s it! With these steps, you’ve implemented two-way binding in Angular and passed the value to another function when it changes.

Here are some examples:

<td><input type=”text” [(ngModel)]=”referenceValue”></td>
<td><a class=”received” (click)=”buttonClicked(this.referenceValue)”>Received</a></td>

Here, suppose you want to pass value which is entered by user into textbox then you have to use [(ngModel)] and specify name of that textbox like [(ngModel)]=”referenceValue”
Now, on click function pass this.referenceValue so that it will pass entered value in text box to function as a parameter.

Another way, specify # value to text value and pass that # value to function as shown below
<input #sampletopass placeholder=”sampletopass” />
<button (click)=”addData(sampletopass.value)”>Add Data</button>