Getting Started with Angular Awesome

Step 1: Prerequisites

Before installing Angular Awesome, make sure you have:

• Angular 19.2 or later
• Node.js 16 or later
• npm 7 or later

Angular Awesome requires the following peer dependencies:

• @angular/core ^19.2.0
• @angular/common ^19.2.0
• @angular/forms ^19.2.0

Step 2: Install the Package

Install Angular Awesome from npm:

npm install angular-awesome

Step 3: Include Web Awesome Assets

Angular Awesome is a wrapper for Web Awesome components. You need to include the Web Awesome assets in your project. See the official Web Awesome documentation for asset setup and guidance: https://webawesome.com/docs/.

Step 1: Import Components

Each component is standalone and can be imported individually. See the GitHub repository for import examples.

Step 2: Use in Templates

Use the components in your templates with their native tag names. All components support Angular template-driven forms with ngModel binding.

Using CSS Custom Properties

Angular Awesome components expose styling options as Angular inputs that map to CSS custom properties.

Using Utility Classes

Web Awesome provides utility classes for common styling needs:

• wa-align-items-* - For alignment (start, end, center, stretch, baseline)
• wa-gap-* - For spacing (0, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl)
• wa-accent, wa-outlined, wa-filled, wa-plain - For appearance
• wa-brand, wa-neutral, wa-success, wa-warning, wa-danger - For color variants