Angular UI Components

This is the web component library and utilizes Angular's web component integration.

Add Dependencies

Angular >=16 dependencies

npm i @abgov/web-components
npm i @abgov/angular-components

Angular <16 dependencies

npm i @abgov/web-components
npm i @abgov/angular-components@2.5.0

Icons

Link ionicons in app/index.html Add the following in the head element

<script
  type="module"
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>

Components

Update src/app/app.module.ts as per the four steps below

// 1. Import the CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

// 2. Import the libs
import "@abgov/web-components";
import { AngularComponentsModule } from "@abgov/angular-components";

@NgModule({
  declarations: [AppComponent],
  imports: [
    // 3. Add the needed imports
    BrowserModule,
    AngularComponentsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  // 4. Add the CUSTOM_ELEMENTS_SCHEMA to the NgModule
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Styles

Add the styles link in the src/styles.css file

@import "@abgov/web-components/index.css";

VS Code Support

In order to use VS Code's HTML/CSS Custom Data support to enhance GoAB Web Components HTML editing experience, include our html custom data setting found in .vscode/settings.json:

{
  "html.customData": ["./node_modules/@abgov/web-components/html.html-data.json"]
}

Visit Design System