Angular

Lab 3: Property Binding & Templates

arrow_back Alle labs
timer 20 minutter
sell module-3-start → module-4-start
Mål: Gør HerdCard dynamisk med @Input() properties, property binding, interpolation og pipes.

Udgangspunkt

Checkout tag module-3-start. Du har en @for loop der renderer 6 HerdCard components, men de viser alle det samme hardcoded indhold (Malkekøer).

git checkout module-3-start

Trin for trin

looks_one Tilføj @Input() properties til HerdCard

Åbn herd-card.ts og tilføj inputs for de data kortet skal vise:

// herd-card.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-herd-card',
  imports: [],
  templateUrl: './herd-card.html',
  styleUrl: './herd-card.css',
})
export class HerdCard {
  @Input() label = '';
  @Input() emoji = '';
  @Input() factor = 0;
  @Input() count = 0;
}

looks_two Property bind fra herd-input template

I herd-input.html, send data fra @for loopen ned til hvert kort:

@for(herd of herdCards; track herd.key) {
  <app-herd-card
    [label]="herd.label"
    [emoji]="herd.emoji"
    [factor]="herd.factor"
  />
}

[label]="herd.label" er property binding. Firkantede parenteser binder en JavaScript expression til en @Input() property.

looks_3 Brug interpolation i herd-card.html

Erstat de hardcoded værdier med {{ }} interpolation:

<!-- herd-card.html -->
<div class="card">
  <div class="card-top">
    <span class="emoji">{{ emoji }}</span>
    <div class="factor">
      <span>CO2e/år</span>
      <span>{{ factor | number }} kg</span>
    </div>
  </div>
  <h3>{{ label }}</h3>
  <div class="input-wrap">
    <input type="number" min="0" placeholder="0"
           (input)="onInput($event)" />
    <span class="suffix">stk.</span>
  </div>
</div>

looks_4 Pipes til formatering

{{ factor | number }} bruger Angulars built-in number pipe til at formatere tal med tusindtalsseparator. For at bruge den skal du importere DecimalPipe:

import { DecimalPipe } from '@angular/common';

@Component({
  ...
  imports: [DecimalPipe],
})

looks_5 Event binding

(input) er event binding. Runde parenteser lytter på DOM events. Tilføj en simpel handler i herd-card.ts:

onInput(event: Event) {
  const value = (event.target as HTMLInputElement).valueAsNumber || 0;
  console.log(`${this.label}: ${value}`);
}
lightbulb
Opsummering af binding syntaks:
[property]="expression" → data ind (property binding)
(event)="handler()" → data ud (event binding)
{{ expression }} → vis data (interpolation)
Hint: Komplet herd-card.ts 
import { Component, Input } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-herd-card',
  imports: [DecimalPipe],
  templateUrl: './herd-card.html',
  styleUrl: './herd-card.css',
})
export class HerdCard {
  @Input() label = '';
  @Input() emoji = '';
  @Input() factor = 0;
  @Input() count = 0;

  onInput(event: Event) {
    const value = (event.target as HTMLInputElement).valueAsNumber || 0;
    console.log(`${this.label}: ${value}`);
  }
}

Dokumentation