routerLink & router-outlet

Relax. We'll talk through this in plain words — no textbook voice.

Instead of the <a> tag, use the routerLink directive for navigation.

<router-outlet> is a placeholder directive that tells the Angular router where to display the activated component.

typescript

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

// app-routing.module.ts
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

You should see

(Clicking the Home and About links swaps in the matching component's content without refreshing the page)