Angular 19+ wrappers for the Web Awesome 3.2.x web components framework
npm install angular-awesomewa-* custom elements, allowing full integration with Angular forms, events, styles, and lifecycle mechanisms.
rules/. All contributors must follow the documentation-first, stage-gated workflow described in rules/README.md before touching source code. Start every change by reviewing the host artifacts:
PACT.md
GLOSSARY.md (links back to the topic glossaries under rules/generative/**)
RULES.md
GUIDES.md
IMPLEMENTATION.md
docs/architecture/c4-context.md
rules/RULES.md#6-forward-only-change-policy) stays enforced. When syncing new Web Awesome releases, run through PROMPT_LIBRARY_RULES_UPDATE.md to refresh both this repo and the enterprise rules at the same time.
3.2.1
@Input()s and @Output()s for binding
ngModel
bash
npm install angular-awesome web-awesome@^3.2.0
`
Make sure you’ve installed @angular/core, @angular/forms, and @angular/common version 19.2 or later.
$3
Each component is standalone and can be imported individually.
`ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { WaInputDirective } from 'angular-awesome';
@Component({
standalone: true,
imports: [WaInputDirective, FormsModule],
template:
})
export class MyComponent {
value = '';
}
`
---
📚 Components
All components and directives mirror the structure of the Web Awesome library. For full APIs, see llms.txt at the repo root and the enterprise rules index:
- Rules index: rules/generative/frontend/webawesome/README.md
- Public Angular exports: src/public-api.ts
Each component’s rule file contains:
* Angular usage examples
* Available inputs and outputs
* Styling customizations
* Link to general Web Awesome Angular Rules
$3
- Added wrappers/exports for:
- (experimental pro)
- (experimental pro)
- (experimental)
-
- Fixed: Tooltip directive path corrected to src/directives/tooltip/ and public exports aligned.
$3
Visit our GitHub Pages documentation for comprehensive information about all components and directives, including:
* Component overviews
* API references
* Usage examples
* Styling options
---
🎨 Styling
Angular-style input bindings automatically set the corresponding Web Awesome CSS custom properties. For example:
`html
`
These map directly to:
`css
--track-width: 6px;
--indicator-color: deeppink;
`
---
🧪 Testing
To run tests:
`bash
npm test
`
For CI or headless testing:
`bash
npm run test:headless
`
---
📦 Build
To produce the production bundle:
`bash
npm run build
`
This uses ng-packagr and outputs all formats in the dist/angular-awesome directory.
$3
This repository exposes a dedicated GitHub Actions workflow at .github/workflows/codex-auto-update.yml that can run a Codex prompt in CI and open a pull request with the resulting edits.
To use it:
1. Add a repository secret named CODEX_API_KEY that contains a Codex-compatible API key.
2. Open Actions → Codex Auto Update → Run workflow and provide the prompt that describes the change you want Codex to make (optionally override the branch name).
3. The workflow downloads the Codex CLI, authenticates with the secret, executes the prompt inside this repo, and creates a pull request when files were changed.
In addition to the manual trigger, any push to the master branch that touches react/** automatically runs the workflow using the default instructions stored in PROMPT_LIBRARY_RULES_UPDATE.md`. This keeps the Angular wrapper synchronized with React changes without any manual action.