AngularLynx

    Contact List

    A searchable contact list grouped by first letter, with sticky letter headers, a contact dialog, an "Add Contact" form and a delete confirmation.

    Built with the UI components: Avatar, Input, Dialog, Alert Dialog, Empty State, Separator, Label and Button.

    contact-listsrc/app/app.ts

    What it shows

    • Search and grouping with computed() — filtered() applies the query, and grouped() sorts the result and splits it by first letter.
    • Sticky section headers — each letter header uses sticky top-0 and is a direct child of the <scroll-view>. Lynx applies position: sticky only there. See <scroll-view>.
    • Initials avatars — an Avatar shows the initials from initials() when there's no photo.
    • Dialogs to view, add and delete — tapping a contact opens a Dialog. Its Delete button hands off to an Alert Dialog to confirm.
    • An empty state — an Empty State shows when no contacts match.