Two Way Binding Angular 11

Angular
1

I’m doing the Two Way Binding section on Mosh’s Angular Tutorial and it has an input box that shows a default value and allows the user to update the input field.

When the user hits the Enter button it console logs what the user updated the text to.
the way Mosh demonstrates is a way that no longer works in the current version as of typing this post, Angular 11.

Here is my courses.components.ts

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

import { CoursesService } from ‘./course/courses.service’;

@Component({
selector: ‘courses’, //
template: <button class="btn btn-primary" [class.active]="isActive">Save</button> <input [value]="email" (keyup.enter)="email = $event.target.value; onKeyUp()">
})
export class CoursesComponent {
title = “List of courses”;
courses;
imgUrl = “https://images.unsplash.com/photo-1621176302431-e02e9a190723?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80”;
imgWidth = “300px”
colSpan = 2;
isActive = true;
onSave($event: any) {
console.log(“Button was clicked!”, $event)
}

// email: any;
email = "me@example.com"

onKeyUp() {
    console.log((this.email));
}

constructor(service: CoursesService) {
    this.courses = service.getCourses();
}

// Add the logic to call an http endpoint

}

2 Likes
2

thanks for the tip… I realize that