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.

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.

Step 3: Configure Your Module

If you're using NgModules, make sure to include CUSTOM_ELEMENTS_SCHEMA in your module.

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