Project 14: Newsletter Form

Angular Engineer

Builds on these lessons

Component Task

Objective

A route segment prefixed with : (like :id) captures a dynamic value from the URL. Nesting a children array under a route builds a sub-route that renders inside the parent's own <router-outlet>.

You're building newsletter subscriber management routes.

Task: write routes where subscribers/:id renders SubscriberComponent, with a child route preferences rendering SubscriberPreferencesComponent.

component.ts

import { Component } from '@angular/core';
import { Routes } from '@angular/router';

@Component({ selector: 'app-subscriber', standalone: true, template: `<p>Subscriber detail</p>` })
export class SubscriberComponent {}

@Component({ selector: 'app-subscriber-preferences', standalone: true, template: `<p>Preferences</p>` })
export class SubscriberPreferencesComponent {}

export const routes: Routes = [
  {
    path: 'subscribers/:id',
    component: SubscriberComponent,
    children: [
      { path: 'preferences', component: SubscriberPreferencesComponent }
    ]
  }
];

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →