AngularLynx

    Task Manager

    A task list with All, Active and Done tabs, priority badges, a sheet for adding tasks and a long-press menu for deleting them.

    Built with the UI components: Tabs, Checkbox, Badge, Sheet, Input, Select, Action Sheet, Empty State, Label and Button.

    task-managersrc/app/app.ts

    What it shows

    • Filtered tabs — Tabs switch between three computed() lists derived from one tasks signal. Each tab trigger shows its count in a Badge.
    • One template, three lists — a single <ng-template #taskList> renders every tab's list through *ngTemplateOutlet.
    • Completing a task — the Checkbox's (checkedChange) flips done, and class bindings strike the title through.
    • Priority badges — priorityVariant() maps high, medium and low to the Badge's destructive, default and secondary variants.
    • Adding and deleting — + New opens a Sheet with an Input and a Select. A long press, (bindlongpress), opens an Action Sheet with Delete.