Angular 5/4/2 method passed as reference is not in scope

Question

Run the entire example

I have a simple module that I call it as the following:

Answer 1

You have to use arrow function to achieve this

Working example: https://stackblitz.com/edit/angular-hbfhxu?file=app/app.component.ts

export class AppComponent  {
   appModel : AppModel = {name : "Ron Howard"};

   // convert the function into arrow function
   alertTest = () => {
      console.log(this.appModel);
      alert(this.appModel);
   }
}

To know more on Arrow function, here is the mozilla documentation link

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.