Project 11: FAQ Accordion
Angular Engineer
Builds on these lessons
Component Task
Objective
RouterOutlet marks where the router renders whichever component matches the current URL; RouterLink replaces a plain href with client-side navigation that doesn't reload the page.
You're building the shell for an FAQ page.
Task: write a standalone AppComponent that imports RouterOutlet and RouterLink, with a nav link to /faq and a <router-outlet>.
component.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, RouterLink],
template: `
<nav><a routerLink="/faq">FAQ</a></nav>
<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