skills.rest
tmarsbr
tmarsbrCOMMUNITY
Explore all skills by this author →
GitHub

angular-ui-patterns

Standardize loading, error handling, and data rendering patterns in Angular applications.

Updated Jul 30, 2025
Search Tags:#angular#error-handling#progressive-disclosure#ui-patterns#loading-states#data-display
One-click install
npx skills add https://github.com/tmarsbr/portifolio --skill angular-ui-patterns-tmarsbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-ui-patterns
Source: https://github.com/tmarsbr/portifolio/tree/main/skill-ux/skills/angular-ui-patterns
Command: npx skills add https://github.com/tmarsbr/portifolio --skill angular-ui-patterns-tmarsbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular UI patterns provide a structured approach to handle loading states, errors, progressive disclosure, and data presentation in Angular applications, ensuring consistent UX and reliable component behavior.

Core Features & Use Cases

  • Loading State Patterns: guidance on when to show skeletons vs spinners and how to avoid flashes of content.
  • Error Handling Patterns: strategies for surfacing errors at field, component, and page levels, plus retry options.
  • Progressive Disclosure: using @defer to load non-critical content and improve perceived performance.
  • Data Display & Empty States: consistent handling of empty data with contextual empty states and actions.
  • Form & Dialog Patterns: patterns for form submission states, validation feedback, and modal/dialog lifecycles.
  • Anti-patterns & Best Practices: common mistakes to avoid and guardrails to follow.

Quick Start

Create an Angular list component that demonstrates loading, error, and empty states following the patterns described.

Frequently Asked Questions about angular-ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle loading states in Angular without showing flashes of content?▼

Angular loading state patterns prevent content flashes by guiding when to use skeletons versus spinners. Indicators appear only when data is absent, ensuring consistent UX and avoiding visual flicker during asynchronous data fetching.

What is the best way to surface errors in Angular component libraries?▼

Error handling patterns in Angular surface all errors at field, component, and page levels. This structured approach includes retry options and ensures reliable component behavior across dashboards, forms, and any asynchronous data UI.

How do I use @defer for progressive disclosure in Angular applications?▼

Progressive disclosure via @defer loads non-critical Angular content to improve perceived performance. This pattern defers rendering until needed, optimizing initial load times while maintaining full interface functionality.

How do I manage empty states and data display in Angular dashboards?▼

Angular data display patterns handle empty data with contextual empty states and actions. This ensures dashboards and charts communicate clearly when no data exists, offering users relevant next steps instead of blank screens.

What are common Angular UI anti-patterns for form submission and validation feedback?▼

Angular UI anti-patterns include improper form submission states and unclear validation feedback. Best practices provide guardrails for modal and dialog lifecycles, ensuring forms manage submission states and validation feedback correctly.

Related Skills

Explore More Software Engineering Skills→
involvexinvolvex

react-ui-patterns

Implement React UI patterns for loading states, error handling, and optimistic updates.

Community
Intermediate
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
oguzhan18oguzhan18
6

rxjs

Manage RxJS observables and reactive streams in Angular applications.

Community
Intermediate
tech-with-sethtech-with-seth
4

add-error-boundary

Add standardized route error boundaries to React Router 7 apps.

Official
Intermediate