Error Cannot Read Property Navigate of Undefined?

Question

I am trying to navigate to another component after returning value from service. But getting error on navigation. My code files are as follows:

This is my PaymentPageComponent

import { Router } from '@angular/router';
import { PaymentService} from 'src/app/Services/comServices/payment.service'
import { fileURLToPath } from 'url';

export class PaymentPageComponent implements OnInit {
  model = {};
  constructor(public router: Router) {}

  ngOnInit(){
    let config = { 
      "publicKey": "abcd",
      "eventHandler": {
          onSuccess (clientSideVerificationResult) {
            const payload = clientSideVerificationResult;
            const output = Object.assign( {}, this.model, {token: payload.token},{amount:payload.amount});
             PaymentService
              // hit merchant api for initiating verfication
              PaymentService.verifyPayment(output)
              .then((response) => {
                if(response.data.paymentStatus=== "Completed"){
                  alert('Payment Successfull');
                  this.router.navigate(['/Bill']);
                }
              });
  
          },
      },
    };
  }

}

This is my service file

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Router} from '@angular/router';
import axios from 'axios';


@Injectable({
  providedIn: 'root',
})

export class PaymentService {   
    
    constructor() {}
    static verifyPayment(payload: any) {

    let data = {
        'token': payload.token,
        'amount': payload.amount,
    };

    return axios.post(environment.api_url+"setappointment", data)
    }
}

I am getting error on navigation.

TypeError: Cannot read property 'navigate' of undefined

Answer 1

Try modifying onSuccess to arrow function.

"eventHandler": {
    onSuccess: (clientSideVerificationResult) => {
      const payload = clientSideVerificationResult;
      const output = Object.assign( {}, this.model, {token: payload.token},{amount:payload.amount});
       PaymentService
        // hit merchant api for initiating verfication
        PaymentService.verifyPayment(output)
        .then((response) => {
          if(response.data.paymentStatus=== "Completed"){
            alert('Payment Successfull');
            this.router.navigate(['/Bill']);
          }
        });

    },
},