We learned how to use one way data bindings using properties and events. Angular introduces a third option to use with input controls. This directive is called ngModel. The syntax can be a little strange, because this directive combines property and event bindings together.
With ngModel, we can easily achieve two-way data binding easily. In the following example, we will bind username and password inputs to a user object:
@Component({
selector: 'app-root',
template: `
<input type="text" [(ngModel)]="user.username">
<input type="password" [(ngModel)]="user.password">
<button (click)="sendUser()">Send</button>
`
})
export class AppComponent {
private user = {
username: '',
password: ''
}
sendUser(){
console.log(this.user);
}
}