Two way binding in Angular is resulting in one way binding

Question

I am new to Angular and following the video

https://www.youtube.com/watch?v=1Es9AaNBJ5Q&list=PLOghUv2IDLKHo0CJkwLcbb1YW0As5fRZd&index=46

But, two way databinding is not working. Initially, the input text has the value [email protected] However, when I change the value and hit enter key, the value still is [email protected]

Here are all the versions Angular CLI: 16.1.4 Node: 16.15.1 Package Manager: npm 8.11.0 OS: win32 x64

import { Component } from "@angular/core";
import { CoursesService } from "./courses.service";

@Component( {
    selector: 'courses',
    template: `
    <input type="text" [value]="email" (keyup.enter)="onKeyEnter()"/>
    `
} )
export class CoursesComponent{
    email:string;
    constructor(service:CoursesService) {
        this.email = "[email protected]";
    }
    onKeyEnter()
    {
        console.log("My new email id : " , this.email);
    }
};

Answer 1

Try using [(ngModel)]="value"

<input type="text" [(ngModel)]="email" (keyup.enter)="onKeyEnter()"/>

ngModel Creates a FormControl instance from a domain model and binds it to a form control element.

for more ...

Answer 2

The video is trying to explain how the to-way binding works behind the scene by writing a two way binding manually. This way is good to teach somebody to build up mental model from scratch. But I would not recommend you try on real applications. Though what was the problem I explained about.

The problem are

1. You're not assigning a value to email model from onKeyEnter function.
2. For doing the same you have to pass the value to onKeyEnter function by accessing $event special object.
3. Also change event to keyup only instead of keyup.enter

HTML

<input type="text" [value]="email" (keyup)="onKeyEnter($event.target.value)"/>

TS

onKeyEnter(value: string) {
  this.email = value;
}

Okay then gradually for learning you can make use ngModel (kind of similar to what you did before)

<input type="text" [ngModel]="email" (ngModelChange)="email=$event">

Above [] stands for Property binding and () event binding.

---

And then you can go further to combine both [] and () which becomes [(ngModel)] and change text get removed. So it becomes

<input type="text" [(ngModel)]="email" />

Other way is to play with two way binding is model driven form which uses formControl/formControlName.

Don't forget to import the FormsModule in your app.module.ts imports array.

Answer 3

Looks like you did not watch the video till the end in the same video it has the answer for two way binding you need to use [(ngModel)] instead of [value] directive.

<input type="text" [(ngModel)]="email" (keyup.enter)="onKeyEnter()"/>

P.S: import FomsModule in case if you face this error Can't bind to 'ngModel' since it isn't know property of 'input'

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

imports: [ 
           ...
           FormsModule
         ]