I'm facing this with Angular 9. There is already a question (asked 7 years ago):
But it wasn't very helpful. I checked other questions also like this:
Angular2 component's “this” is undefined when executing callback function
I want to call a method with every keystroke on an input field.
HTML
<input ... type="text" (input)="crossCheckUsername()" placeholder="Enter username">
Typescript
constructor(..., private _userService: UserService) { 
   // nothing here 
}
ngOnInit() {
  // nothing here
}
// users is defined properly; it is hard coded in the starting only
isUserExists(): boolean {
  let userExists = false;
  this.users.forEach(function (user) {
    if(*some logic*) {
        userExists=true;
    }
    else {
      userExists=false;
    }
  })
  return userExists;
}
crossCheckUsername() {  // this method will be called on every key stroke
  if(this.isUserExists()) {
    console.log("Try a different username");
  }
  else {
    //do nothing; keep typing
  }
}
But I'm getting this with every keystroke:
Please correct my mistake.


usersis already defined. In fact it is hard coded. Trust me :-) I just edited the question also. Please check once more.