03‐Create Menu Bar - zhamri/stiwk2124-Angular-Route GitHub Wiki

app.routes.ts

export const routes: Routes = [
  {
    path: 'course',
    component: Course,
  },
  {
    path: 'about',
    component: About,
  },
  {
    path: 'login',
    component: Login,
  },
];

app.html

<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

Import RouterOutlet and NavBar in app.ts

import { RouterOutlet } from '@angular/router';
import {NavBar} from './nav-bar/nav-bar';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, NavBar],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

nav-bar.html

        <li class="nav-item">
          <a class="nav-link" routerLink="course">Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="login">Login</a>
        </li>

Import RouterLink in nav-bar.ts

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

@Component({
  selector: 'app-nav-bar',
  imports: [RouterLink],
  templateUrl: './nav-bar.html',
  styleUrl: './nav-bar.css'
})
⚠️ **GitHub.com Fallback** ⚠️