Angular Routing Tips

angular-tips-routing.md

Get values from ActivatedRoute

class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;
    const user = route.snapshot.data.user;
    const parentId = route.snapshot.parent.paramMap.get("id")
  }
}

Subscribe to route changes

  private subscribeToRouteChanges() {
    this.route.params.subscribe(val => {
      this.loadResources();
    });
  }

Navigate to route relative to current route

this.router.navigate(['/mypath']);

Navigate to parent route (go back)

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

Navigate and resolve some data

Your route -

{
	path: 'mypath',
	component: MyAppComponent,
	data: {
		someData: "Hello World"
	}
},

Your Component -

this.route.snapshot.data['someData']