skills.rest
GedMarc
GedMarcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-awesome

Wrap Web Awesome wa-* components as Angular 20+ directives with typed inputs and outputs.

2|1|Updated Jun 4, 2025
Search Tags:#angular#web-components#directives#toast#web-awesome#controlvalueaccessor#slot-projection
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-awesome
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Integrating Web Awesome web components directly into Angular applications requires careful attribute reflection, event mapping, form control adapters, and slot projection so that Angular templates behave predictably; angular-awesome removes this friction by providing standalone Angular directives and components that mirror each wa-* web component with typed inputs, dual-alias outputs, and ControlValueAccessor support.

Core Features & Use Cases

  • Seamless Binding: Each wa-* web component is wrapped as a standalone directive or component exposing @Input()s (with string unions for template compatibility) and @Output() events (both camelCase and hyphenated aliases).
  • Form Integration & CVA: Common form controls implement ControlValueAccessor so you can use [(ngModel)] or reactive forms with wa-input, wa-select, wa-checkbox, and others.
  • Layout, Theming & Services: Includes layout utilities (gap, stack, grid), Toast service/provider and container, appearance/variant/size tokens, and accessibility considerations.
  • Developer Patterns & Tests: Authoring patterns, testing conventions, and per-component rules/examples accelerate creating and maintaining wrappers.

Quick Start

Import the WaButtonDirective into a standalone Angular component and add a <wa-button variant="brand" (wa-click)="save()">Save</wa-button> element in the template to validate attribute reflection and event emission.

Frequently Asked Questions about angular-awesome

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

FAQPage Schema
How do I integrate Web Awesome web components with Angular forms and ngModel?▼

You can integrate Web Awesome web components with Angular forms by using wrapper directives that implement ControlValueAccessor. This allows wa-input, wa-select, and wa-checkbox components to support both reactive forms and [(ngModel)] two-way binding.

Can I use native Angular inputs and outputs with wa-* web components?▼

Yes, native Angular inputs and outputs are enabled through standalone directives that wrap each wa-* web component. These wrappers expose typed @Input() properties and dual-alias @Output() events supporting both camelCase and hyphenated syntax for predictable template behavior.

What's the best way to handle attribute reflection and slot projection for web components in Angular 20?▼

The best way to handle attribute reflection and slot projection is using Renderer2-based standalone directives that mirror wa-* components. This approach correctly reflects attributes and manages slot projection so Angular templates behave predictably during UI composition.

Do I need Angular 20 and TypeScript to use Web Awesome component wrappers?▼

Yes, you need Angular 20+, TypeScript, and Web Awesome 3.3.x to use these wrappers. The directives require standalone directive/component patterns and dual-alias event outputs to correctly operate within your Angular project architecture.

Why does my Angular template not reflect attribute changes on a Web Awesome component?▼

Attribute changes may not reflect because native web components require explicit attribute reflection. Using dedicated Angular wrapper directives with Renderer2-based attribute reflection ensures that property updates correctly sync to the underlying wa-* web component DOM.

Does angular-awesome provide layout utilities and toast services for Angular?▼

Yes, angular-awesome provides layout utilities like gap, stack, and grid, alongside a Toast service and container. It also includes appearance, variant, and size theming tokens, as well as accessibility considerations for Web Awesome component integration.

Related Skills

Explore More Software Engineering Skills→
GedMarcGedMarc
2

angular-awesome-new-component

Scaffold Angular wrapper directives for Web Awesome components from llms.txt.

Community
Advanced
svssdevasvssdeva
1

angular-component

Generate Angular v20+ standalone components with signal-based inputs and outputs.

Community
Advanced
AincFhAincFh

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind utilities into React apps.

Community
Advanced
GedMarcGedMarc
2

angular-awesome-forms

Integrate Web Awesome controls with Angular Forms via ngModel or FormGroup.

Community
Intermediate