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

@Paritosh's answer is correct and I recommend doing it like that. I just want to propse yet another (older?) method of doing it. The scope for this is different when you pass the function like that to another component.

You could bind the scope from AppComponent to the method like this:

export class AppComponent  {
  appModel : AppModel = {name : "Ron Howard"};
  // bind scope from AppCompoent to the method, making this being the scope from this component, and not from ButtonComponent 
  alertTestScoped:Function = this.alertTest.bind(this); 
  alertTest(){
    console.log(this.appModel); // this.appModel us undefined
    alert("test");
  }

}

and then pass alertTestScoped to the AppButton component.

Working example