Angular UI components
This library contains standalone Angular components that wrap the Government of Alberta Web Components.
1. Add dependencies
npm i @abgov/web-components
npm i @abgov/angular-components
npm i @abgov/ui-components-common2. Register the web components
Import the underlying web components once in src/main.ts, before
bootstrapping the application:
import “@abgov/web-components”;Keep your existing bootstrapApplication call after this import.
3. Import wrapper components
Import each standalone wrapper directly into the component that uses it:
// src/app/app.ts
import { Component } from "@angular/core";
import { GoabButton } from "@abgov/angular-components";
@Component({
selector: "app-root",
standalone: true,
imports: [GoabButton],
template: '<goab-button type="primary">Continue</goab-button>',
})
export class App {}standalone: true is shown explicitly for compatibility with Angular 18; it
is the default in newer Angular versions.
For an existing NgModule-based application, add each standalone wrapper component to
that module’s imports array. AngularComponentsModule is only
needed by applications that still use the legacy goaValue,
goaValueList, or goaChecked form directives.
4. Add styles
Import the component styles in src/styles.css. This stylesheet includes the
design tokens and dark theme overrides:
@import “@abgov/web-components/index.css”;5. Add icons
Add Ionicons to the head element of src/index.html:
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>React UI components
This library contains React components which wrap the Government of Alberta Web Components.
1. Add dependencies
npm i @abgov/react-components
npm i @abgov/web-components
npm i @abgov/ui-components-common2. Link ionicons in app/index.html
Add the following to the head element:
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>3. Import the web components in src/main.tsx
import “@abgov/web-components”;4. Import the styles in src/index.css
This stylesheet includes the design tokens and dark theme overrides:
@import “@abgov/web-components/index.css”;Web components
This library contains web components from the Government of Alberta.
1. Add dependencies
npm i @abgov/web-components2. Link ionicons in index.html
Add the following in the head element:
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>3. Import the web components into src/main.js
import “@abgov/web-components”;4. Add the styles link in your main CSS file
Add the following in src/assets/main.css or wherever your main CSS file is
located. This stylesheet includes the design tokens and dark theme overrides:
@import “@abgov/web-components/index.css”;Use Sass variables
The Web Components stylesheet includes the design tokens and dark theme overrides. You only need to install the design tokens package if you want to use its Sass variables directly in your own styles.
1. Add the design tokens package
npm i @abgov/design-tokens2. Import the Sass variables
Import the variables into the Sass file where you need them:
@use “@abgov/design-tokens/dist/tokens” as *;.my-card {
padding: $goa-space-m * 2;
border-radius: $goa-border-radius-m;
}Sass variables are set when your styles compile and cannot change with the active
theme. Use CSS custom properties such as var(--goa-*) for colours,
surfaces, and other values that need to switch between light and dark themes.
- Get feedback on your service
- Propose new components or patterns
- Suggest updates to existing resources
- Ask questions
- Share feedback