angular-awesome

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.