skills.rest
linuxfoundation
linuxfoundationOFFICIAL
Explore all skills by this author →
WebsiteGitHub

drawer

Generates Angular slide-in drawer components with lazy data loading and PrimeNG p-drawer conventions.

12|6|Updated Jul 14, 2025
Search Tags:#frontend#angular#signals#lazy loading#component generation#drawer#primeng
One-click install
npx skills add https://github.com/linuxfoundation/lfx-self-serve --skill drawer-linuxfoundation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawer
Source: https://github.com/linuxfoundation/lfx-self-serve/tree/main/.claude/skills/drawer
Command: npx skills add https://github.com/linuxfoundation/lfx-self-serve --skill drawer-linuxfoundation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building slide-in detail panels in the LFX One Angular app requires following strict team conventions for visibility bindings, lazy data loading, chart integration, and responsive sizing, and this Skill encodes those conventions so generated drawers match the existing codebase. ## Core Features & Use Cases - Drawer Component Generation: Creates the three-file component set (.component.ts, .component.html, .component.scss) with the LFX license header and the 11-section class structure. - Lazy Data Loading on Open: Wires visibility via model<boolean>(false) with two-way [(visible)] binding and loads data through toObservable(visible).pipe(skip(1), switchMap(...)) with forkJoin for parallel calls. - Responsive Width Standard: Applies the standard width chain xl:w-[45%] lg:w-[55%] md:w-[70%] sm:w-[90%] w-full. - Use Case: A list-row click needs to open a detail panel without a route change; the Skill generates a drawer that lazy-loads its data and charts only when opened. ## Quick Start Ask the assistant to build a drawer component that opens from a list row and lazy-loads detail data when opened.

Frequently Asked Questions about drawer

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

FAQPage Schema
How do I build a slide-in drawer component in Angular with PrimeNG?▼

Build the drawer on p-drawer with a model<boolean>(false) signal for two-way [(visible)] binding from the parent. Generate the .component.ts, .component.html, and .component.scss files following the team's 11-section class structure and license header conventions.

How to lazy-load data when a drawer opens in Angular?▼

Use toSignal over toObservable(this.visible).pipe(skip(1), switchMap(...)) so data loads only when the drawer opens, not on component creation. Use forkJoin for parallel API calls and reset the loading flag when the drawer closes.

When should I use a drawer instead of a modal dialog?▼

Use a drawer when detail content should slide in from the side without a route change, such as list-row detail panels. Use DialogService.open only for true modal dialogs; this Skill explicitly does not cover modal lifecycle.

What responsive width classes does the drawer pattern use?▼

The standard width chain is xl:w-[45%] lg:w-[55%] md:w-[70%] sm:w-[90%] w-full, making the drawer full-width on small screens and progressively narrower on larger breakpoints.

Does the drawer skill handle routing or navigation changes?▼

No, drawers stay in place and do not involve routing changes. The Skill covers only in-place slide-in panels; navigation-based detail views are outside its scope.

Related Skills

Explore More Software Engineering Skills→
linuxfoundationlinuxfoundation
8

lfx-ui-builder

Generate PR-ready Angular 20 frontend code with LFX conventions.

Official
Advanced
MrJmpl3MrJmpl3

0113-nuxt-tables

Define reusable Nuxt/Vue table column configurations and row actions for data grids.

Community
Intermediate
afonsoftafonsoft

angular-development

Guides Angular and TypeScript development for the EAF enterprise application framework.

Community
Intermediate
albanistalbanist
4

umbraco-modals

Create modal dialogs and sidebars in the Umbraco backoffice.

Community
Intermediate