Angular

Labs

arrow_back Tilbage til forsiden

Workshoppen indeholder 7 praktiske labs plus en bonus lab. Hver lab bygger videre på den forrige og følger tag progressionen i workshop repoet.

1

Extract Components

timer 25 minutter · module-1-start → module-2-start

Opdel app.ts i feature components: Header, Footer, Calculator, HerdInput og ResultPanel. Lær om ViewEncapsulation.

 2

Control Flow

timer 20 minutter · module-2-start → module-3-start

Opret HerdCard component, byg et data array med interface og brug @for til at loope over kortene.

 3

Property Binding & Templates

timer 20 minutter · module-3-start → module-4-start

Tilføj @Input() properties til HerdCard, brug property binding, interpolation og pipes til formatering.

 4

Component Communication

timer 20 minutter · module-4-start → module-5-start

Brug @Output() og EventEmitter til at sende data fra HerdCard op til HerdInput. Beregn total CO₂.

 5

Signals

timer 20 minutter · module-5-start → module-6-start

Migrér til signal baserede inputs med den officielle migration. Brug signal(), computed() og effect().

 6

Services & DI

timer 20 minutter · module-6-start → module-7-start

Opret EmissionService, flyt beregningslogik og state dertil, og brug inject() til dependency injection.

 7

HTTP & Observables

timer 25 minutter · module-7-start → module-8-start

Forbind til et REST API med HttpClient, konvertér Observables med toSignal() og håndtér fejl.

 ⭐

Routing (Bonus)

timer 15 minutter · Bonus Modul

Tilføj routing med navigation mellem CO₂ Beregneren og en Historik side. Lær om router-outlet, routerLink og lazy loading.