Event Binding

Events are actions the user performs while interacting with the application. If a user clicks on DOM with a mouse, an event can be raised for the same, and components can be notified. This is known as Event binding. There are multiple types of events:

1. Two-way data binding

Here, data is notified to components when it is changed at the template and vice versa. The basic functionality to achieve this is via ngModel.
When we use the parenthesis `()` in the HTML template, the event from HTML is notified to the ts file. For example, when we use (click)=”someFunction()” at any DOM element, then the event from HTML travels to the ts file.
Similarly, when we use square brackets `[]` in the HTML template, the event or any change from the ts file gets travelled to the HTML template. To combine these properties, ngModel is created with the mix of both types of events. This phenomenon is called Banana in a box ` [()] ` .

Here is an example of that. If the user changes the input value by typing anything, it will be changed at the employeeName variable of the ts file. Again, if the developer tries to change the employeeName variable, it will be reflected in UI.

ts file

export class DataBindingComponent {

  name = '';

  setValue() { this.employeeName = 'Paritosh Louhan'; }

}

<input [(ngModel)]="employeeName" required>