Routing Angular Applications

Route Navigation from a Component

In addition to routerLink, we are able to navigate from inside our class.

We can use the Router that comes from @angular/router. Once we inject it into our class, we can use this.router.navigate(['/about', user.username]);

import { Router } from '@angular/router';

...

export class AboutUserComponent implements OnInit {
  user: User;

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

  ngOnInit() {
    // grab the current username
    let username = this.route.snapshot.params['username'];
    this.service.getUser(username).then(user => this.user = user);
  }

  goBack() {
    this.router.navigate(['/about']);
  }

}