Project 12: Product Landing Page
Angular Engineer
Builds on these lessons
Component Task
Objective
A Routes array maps URL paths to components. redirectTo with pathMatch: 'full' sends the empty root path somewhere useful by default.
You're building a product landing page's routing.
Task: write a ProductComponent rendering the product name, and a routes array mapping 'product' to it, with the empty path redirecting to 'product'.
component.ts
import { Component } from '@angular/core';
import { Routes } from '@angular/router';
@Component({ selector: 'app-product', standalone: true, template: `<h2>Wireless Headphones</h2>` })
export class ProductComponent {}
export const routes: Routes = [
{ path: 'product', component: ProductComponent },
{ path: '', redirectTo: 'product', pathMatch: 'full' }
];
* Hint: Correct characters turn green, incorrect ones turn red.
Compiler Output
🅰️
Compile your component to see the result