Setting up an Angular router

Last Updated on

1>> To have a router work in Angular, create a component xyz via:

ng g c xyz

Now the following files become available:
– xyz.component.css
– xyz.component.html
– xyz.component.ts
– xyz.component.spec.ts

2>> In app-routing.module.ts, import the component at the top of the page, then include the path to the component in the routes variable:

import { XyzComponent } from './xyz/xyz.component';

const routes: Routes = [
  {path:"xyz", component:XyzComponent}
];

3>> In the app.component.html file, have the <a> link with a routerLink and routerLinkActive attribute. Then have the tag <router-outlet>:

<a routerLink="/xyz" routerLinkActive="active">Link 1</a>

<router-outlet></router-outlet>

Lämna ett svar