Angular

Forms

Layout

Media

Helpers

Frameworks

Angular

Angular plays nice with custom elements, so you can use Web Awesome in your Angular apps with ease.

Installation

Link to This Section

To add Web Awesome to your Angular app, install the package from npm.

npm install @awesome.me/webawesome

Configuration

Link to This Section

Load the Theme

Link to This Section

Include a theme by adding the stylesheet to the styles array in your angular.json file:

"architect": {
  "build": {
    ...
    "options": {
      ...
      "styles": [
        "src/styles.scss",
        "@awesome.me/webawesome/dist/styles/webawesome.css"
       ]
      ...
    }
  }
}

Apply the Custom Elements Schema

Link to This Section

Apply the custom elements schema so Angular allows Web Awesome's wa-* tags:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Usage

Link to This Section

Reference Web Awesome components from your component code. Import both the component and its type — otherwise Angular tree-shakes the component out of your build:

import type { WaDrawer } from '@awesome.me/webawesome/dist/components/drawer/drawer.js';
import '@awesome.me/webawesome/dist/components/drawer/drawer.js';

@Component({
  selector: 'app-drawer-example',
  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><wa-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></wa-drawer></div>',
})
export class DrawerExampleComponent {
  // @ViewChild gives a typed reference to the <wa-drawer> element
  @ViewChild('drawer')
  drawer?: ElementRef<WaDrawer>;

  showDrawer() {
    // Access Web Awesome methods via nativeElement
    this.drawer?.nativeElement.show();
  }
}