AngularLynx

    User Profile

    A profile screen with an avatar, a badge, stats and an "About" card, plus a sheet for editing the bio. Look here for a view-then-edit screen.

    Built with the UI components: Avatar, Badge, Card, Sheet, Input, Textarea, Label, Separator and Button.

    user-profilesrc/app/app.ts

    What it shows

    • Avatar fallback — fallback="AJ" shows initials when there's no photo.
    • Vertical separators — orientation="vertical" divides the Posts, Followers and Following stats.
    • Editing in a sheet — Edit Profile opens a Sheet that slides up from the bottom, so there's no navigation to a new screen.
    • Draft, then save — the sheet edits a copy in editBio. Save copies it into bio, and Cancel closes the sheet without saving.
    • Card sections — a Card with a header and content groups the About text.