Below is my component. Point of error is the this.router.navigate()
part. After login, I wanna redirect the user to a different page, something similar to $state.go('dashboard')
.
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFire } from 'angularfire2';
@Component({
templateUrl: 'app/auth/login.component.html'
})
export class LoginComponent {
constructor(private af: AngularFire, private router: Router) { }
onSubmit(formData) {
if(formData.valid) {
console.log(formData.value);
this.af.auth.login({
email: formData.value.email,
password: formData.value.password
}).then(function(success) {
console.log(success);
this.router.navigate(['/dashboard']);
}).catch(function(err) {
console.log(err);
this.router.navigate(['/dashboard']);
})
}
}
}
And I keep getting this error. Please enlighten me, what am I doing wrong?
You have to use Arrow function
instead of function
inside .then
's success
& catch
callback's. Due to which inside success
& catch
callback function
you're loosing component this
(context).
Code
this.af.auth.login({
email: formData.value.email,
password: formData.value.password
}).then(
//used Arrow function here
(success)=> {
console.log(success);
this.router.navigate(['/dashboard']);
}
).catch(
//used Arrow function here
(err)=> {
console.log(err);
this.router.navigate(['/dashboard']);
}
)