Project 13: Job Board Listing
Angular Engineer
Builds on these lessons
Component Task
Objective
routerLinkActive automatically applies a CSS class to a link when its route is the currently active one — the standard way to highlight the active nav item without manual state tracking.
You're building a job board's nav.
Task: write an AppComponent with a link to /jobs that applies the class active-link via routerLinkActive when active, alongside a <router-outlet>.
component.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterLink, RouterLinkActive, RouterOutlet],
template: `
<a routerLink="/jobs" routerLinkActive="active-link">Jobs</a>
<router-outlet></router-outlet>
`
})
export class AppComponent {}
* Hint: Correct characters turn green, incorrect ones turn red.
Compiler Output
🅰️
Compile your component to see the result