Routing in code

Feature: after the user log in he must be redirected to the members page.

Fix the dropdown

The dropdown has an href attribute that with the Routing enabled is no longer working. Remove the href and fix the css.

Note the explicit click handler set to false.

<a (click)="false" class="dropdown-toggle" dropdownToggle>Welcome {{ getUsername() }} <span class="caret"></span></a>
.dropdown-menu li, .dropdown-toggle {
    cursor: pointer;
}

Redirect after login

Open nav.component.ts and add a Router DI to the constructor and add the third event to the login observable. When we logout redirect to home.

...
constructor(private authService: AuthService, private alertify: AlertifyService, private router: Router) {}
...
login() {
  console.log(this.model);
  this.authService.login(this.model).subscribe(data => {
    this.alertify.success('Sucessfully logged in');
  }, error => {
    this.alertify.error("Failed to login");
  }, () => {
    this.router.navigate(['/members']);
  });
}

logout() {
  this.authService.logout();
  this.alertify.message('Logged out');
  this.router.navigate(['/home']);
}
...