AngularLynx

    Notification Center

    A notification feed with an unread count, long-press actions, toast confirmations and an empty state once everything is cleared.

    Built with the UI components: Badge, Card, Action Sheet, Toast, Empty State and Button.

    notification-centersrc/app/app.ts

    What it shows

    • Long press — (bindlongpress) on each card opens an Action Sheet with Mark as Read and Delete. Event names need the bind or catch prefix; an unprefixed (longpress) is silently ignored. See Handling taps and events.
    • Derived unread count — computed() counts unread notifications for the header Badge, which hides at zero.
    • Toasts — toast({ title }) confirms each action, and one <ui-toaster /> in the template displays them.
    • Empty state — an Empty State replaces the list once it's empty.