In order to route different component, you have to set up router in the app.module.ts file

1. const myRoutes: Routes = [ {path: ‘xxx’, component: ComponentName} ];
2. imports: […, RouterModule.forRoot(myRoutes)]

<router-outlet>/</router-outlet> represents where should render the contents

routerLink directive sets up the links, two methods can be use: (1) <a routerLink = “/address” (directly write the address); (2) using attribute binding [routerLink] = “‘/address‘“, or [routerLink] = “[‘/address’, ‘something’]” (using attribute binding, you have to use another single quotation marker represent path string.)

For the routerLink’s path, you should remember, (1) start with “/” means absolute path; (2) without “/” is relative path, and it always adds to the end of current route which is the route of the current component.

routerLinkActive attribute to set up current route as active, such as: routerLinkActive = “active”

routerLinkActiveOptions attribute binding to set up what kind of route will be set up as active: [routerLinkActiveOptions] = ” {exact: true}”, will set up active when the URL is exact the same as current route.

router.navigate([url address], {figure out the address});

• you also can use router navigate method to programmatically switch pages
• import Router service and ActivatedRoute service
• using: this.router.navagate([‘address’], {relativeTo: this.activatedRoute}) to handle the relative address, if the second argument is omitted, it will be relative to root of the url “/”