“this” cannot be used in typescript function (Angu

Question

I want to reference the keyword "this" in a typescript class in my Angular project. But it cannot be used. I always get the error that the variable I want to change is not defined. Here is my implementation:

export class ContactComponent implements OnInit {
  contactForm: FormGroup;
  errorMsg:string = '';
  redirect = "";

  loggedIn(): void {
         this.redirect = "dashboard";
         console.log("success");

in my HTML the redirect variable is connected to a routerLink like this:

<a [routerLink]="redirect"></a>

I have tried this with other variables in other functions but had always the same error.

EDIT:

The loggedIn function is called within another function as "success" parameter like this:

submitForm(): void {
    DBEventProxy.instance().dbevent.login(this.contactForm['username'], 
    this.contactForm['password'], this.loggedIn, this.failed);
  }

The login function needs the parameters username, password, success function, failfunction.

Answer 1

Instead of just referencing the function, you need to bind this to it: this.loggedIn.bind(this).
Only referencing the function ' strips ' it off the this reference it has when referencing. This is standard Javascript behavior.

Answer 2

You need to bind loggedIn to the correct context. There are several options:

1) define loggedIn as bound function:

export class ContactComponent implements OnInit {
  loggedIn = () = > {
         this.redirect = "dashboard";
         console.log("success");`

2) use bind

export class ContactComponent implements OnInit {
  contactForm: FormGroup;
  errorMsg:string = '';
  redirect = "";

  loggedIn(): void {
         this.redirect = "dashboard";
         console.log("success");

    submitForm(): void {
        DBEventProxy.instance().dbevent.login(this.contactForm['username'], 
        this.contactForm['password'], this.loggedIn.bind(this), this.failed);
                                                    ^^^^^^^^^^
      }

3) wrap this.loggedIn into an arrow function that preserves context like this:

this.contactForm['password'], () => this.loggedIn(), this.failed);

And probably you want to do the same for this.failed. Read more about bind and arrow functions here

Answer 3

Since you're using Typescript, you can use arrow functions to preserve the context you expect (this will refer to what you want).

In SubmitForm(), replace this.loggedIn with ()=>this.loggedIn(). The same change should be made to this.failed if that's a function.

DBEventProxy.instance().dbevent.login(
    this.contactForm['username'], 
    this.contactForm['password'], 
    ()=>this.loggedIn(), 
    ()=>this.failed()
);

See the Typescript wiki

Red flags for this

The biggest red flag you can keep in mind is the use of a class method without immediately invoking it. Any time you see a class method being referenced without being invoked as part of that same expression, this might be incorrect.