AngularLynx

    Checkout Form

    A three-step checkout with a shipping address, a payment method and an order summary, under a progress bar.

    Built with the UI components: Progress, Input, Select, Radio Group, Checkbox, Card, Label, Separator and Button.

    checkout-formsrc/app/app.ts

    What it shows

    • Steps from one signal — step() picks the visible section with @if. computed() turns it into the progress value and the step label.
    • Two-way bound fields — each Input binds [(value)] to its own signal, and a Select picks the country.
    • Conditional fields — the card number, expiry and CVV fields appear only while the Radio Group is set to card.
    • Order summary — a Card lists the items, with a Separator above the total.