Implement callback in Angular2/Typescript with a focus on utilizing the 'this' reference

Question

Implement callback in Angular2/Typescript with a focus on utilizing the 'this' reference

Need help with passing an instance method in Angular2.

Upon calling the login() function from the template in the code below, I encounter this error:

Failure TypeError: Cannot read property 'router' of null
    at AuthLoginComponent.success (auth-login.component.ts:30)
    at ZoneDelegate.invoke (zone.js:242)
    at Object.onInvoke (core.umd.js:4391)
    at ZoneDelegate.invoke (zone.js:241)
    at Zone.run (zone.js:113)
    at zone.js:520
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.js:4382)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at drainMicroTaskQueue (zone.js:418)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:349)

Take a look at the code snippet below:

@Component({
    moduleId: module.id,
    selector: "app-auth-login",
    templateUrl: "/app/components/auth/login/auth-login.component.html"
})
export class AuthLoginComponent implements OnInit {
    username : "";
    password : "";

    constructor(
        private authLoginService: AuthLoginService,
        private router: Router
    ) {}

    ngOnInit(): void {
    }

    success(value: Response) : void {
        console.log("Success", value);
        this.router.navigate(["/home"]);
    }

    failure(value: Response) : void {
        console.log("Failure", value);
    }

    login() : void {
        this.authLoginService.login(
            this.username,
            this.password,
            this.success,
            this.failure
        )
    }
}

I have experimented with passing this and success, then invoking t[success]() within the service, however, the same error persists.

My service incorporates a client-side "load balancer" alongside the circuit breaker pattern, explaining my need to pass the success/failure functions for optimal code reuse.

The service harnesses rxjs with toPromise, as shown here:

httpService(...).toPromise().then(success).catch(response => {(circuit breaker pattern on some failures)})

angular typescript angular2-routing angular2-services

Answer 1

Answer №1

It is important to bind this in order to ensure that within the callback, this points to the correct caller.

login() : void {
    this.authLoginService.login(
        this.username,
        this.password,
        this.success.bind(this),
        this.failure.bind(this)
    )
}

Another approach is to utilize arrow functions

login() : void {
    this.authLoginService.login(
        this.username,
        this.password,
        (value) => this.success(value), 
        (value) => this.failure(value)
    )
}

Answer 2

It is important to bind this in order to ensure that within the callback, this points to the correct caller.

login() : void {
    this.authLoginService.login(
        this.username,
        this.password,
        this.success.bind(this),
        this.failure.bind(this)
    )
}

Another approach is to utilize arrow functions

login() : void {
    this.authLoginService.login(
        this.username,
        this.password,
        (value) => this.success(value), 
        (value) => this.failure(value)
    )
}

Answer 3

Answer №2

Designing methods to be used as callbacks inherently suggests that they should be bound to a specific context from the start to avoid any potential mistakes in passing them without the appropriate context.

One way to achieve this is by using arrow functions:

success = (value: Response) : void => { ... }

Another approach is to bind the method within the constructor:

constructor(...) {
  this.success = this.success.bind(this);
  ...
}

The latter method offers an advantage as it enables the ability to spy/mock the method as

AuthLoginComponent.prototype.success

.

Answer 4

Designing methods to be used as callbacks inherently suggests that they should be bound to a specific context from the start to avoid any potential mistakes in passing them without the appropriate context.

One way to achieve this is by using arrow functions:

success = (value: Response) : void => { ... }

Another approach is to bind the method within the constructor:

constructor(...) {
  this.success = this.success.bind(this);
  ...
}

The latter method offers an advantage as it enables the ability to spy/mock the method as

AuthLoginComponent.prototype.success

.

Implement callback in Angular2/Typescript with a focus on utilizing the 'this' reference

Answer №1

Answer №2

Similar questions

Modifying the appearance of a Component within a NavLink

After using apt to install tsc, I find myself in a dilemma on how to either delete or upgrade it

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

Testing an Angular service call

I am having trouble getting Angular 6 to work with lowdb

An easy guide to displaying an HTML string in a DIV with Angular 6

Guide to setting up identically named properties in Child container components

What sets apart the ? operator from incorporating undefined in the type declaration?

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

Every npm task results in an identical error, even the simple version check (npm -v). In contrast to previous inquiries, not one npm action is functioning

Typescript not flagging an error for an object being declared without a type

Having trouble utilizing the Visual Studio Code debugger in an Express.js project that uses TypeScript

What sets *ngTemplateOutlet apart from [ngTemplateOutlet]?

Leveraging React and TypeScript's capabilities to pass around arguments efficiently

NextJS and AWS Amplify collaboration for secure authentication routing

Transforming a cURL command into an HTTP POST request in Angular 2

Surprising Logging Quirks in Angular

Problem with jasmine unit testing in a firebase-integrated ionic/angular application

Is there a way to locate all projects impacted by `nx`?

Saving a picture to your Ionic device