cannot read property 'navigate' of undefined angular

Question

import { Component, OnInit, Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import { GuessService } from './guess.service';
import 'rxjs/add/operator/map';
import {Router} from '@angular/router';

declare var jQuery:any;
declare var $ :any;

@Component({
  selector: 'app-guess',
  templateUrl: './guess.component.html',
  styleUrls: ['./guess.component.css']
})
@Injectable()
export class GuessComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {


  }
  CheckLogin(name,pass)
  {

    $.ajax({
      headers:{  

   "Accept":"application/json",//depends on your api
    "Content-type":"application/x-www-form-urlencoded"//depends on your api
      },   url:"http://199.188.207.196:5555/user/login/",
      method:"post",
      data:{"email":name,"password":pass},
      success:function(response){

        if(response.success == true){
        console.log("ok");
        this.router.navigate(['/main']);
      }
        else{
          console.log("backend");
        }
      }
    });
  }    

}

When user click on CheckLogin button then it must route to login component, but in my side it show error.

I found solution of my question in stackoverflow but it's not working, i don't know what is the problem.

Its just a class , not even a component. Please post whole code — Vikhyath Maiya
– Vikhyath Maiya, Commented Jan 12, 2018 at 14:11
You have lost the context of this, is there a reason you are using jQuery ajax instead of Angular HttpModule? — Michael Doye
– Michael Doye, Commented Jan 12, 2018 at 14:26

Mashudu M · Accepted Answer · 2018-01-12 14:52:49Z

1

you need to add => so that you can have the reference to the component.
e.g :

CheckLogin(name,pass) => {  
...  
}

this answer here was a pointer for me, it is still like a hack, you need to do things properly.
Angular2 injected Router is undefined

answered Jan 12, 2018 at 14:52

Mashudu M

315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isaac Weingarten Over a year ago

you mean like this CheckLogin = (name,pass) => {...}

Mashudu M Over a year ago

Yes,using arrow functions, should be something like: CheckLogin = (name,pass) => { ... }

justojas · Accepted Answer · 2018-01-12 14:09:01Z

0

Try this

import { Component, OnInit, Injectable} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';

export class GuessComponent implements OnInit {

constructor(private router: Router, private route: ActivatedRoute) {}

CheckLogin(name,pass)
{
  this.router.navigate(['/login'], {relativeTo: this.route});
}

answered Jan 12, 2018 at 14:09

justojas

1059 bronze badges

Collectives™ on Stack Overflow

cannot read property 'navigate' of undefined angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related