2. Components, templates and data binding

import { Component, input, output, signal, computed } from "@angular/core";
import { CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-order-card",
  imports: [CurrencyPipe],                        // standalone: import what the template uses
  template: `
    <div class="card" [class.paid]="order().status === 'paid'">
      <h3>#{{ order().id }} — {{ order().customer }}</h3>
      <p>{{ order().total | currency:'INR' }}</p>
      <input [value]="note()" (input)="note.set($any($event.target).value)" />
      <button (click)="select.emit(order().id)" [disabled]="busy()">Open</button>
    </div>`,
  styleUrl: "./order-card.scss",
})
export class OrderCard {
  order = input.required<Order>();                // signal input (v17.1+)
  select = output<number>();                      // output (v17.3+)
  note = signal("");
  busy = signal(false);
  isBig = computed(() => this.order().total > 10000);
}