Usage with Angular

The preferred approach for integrating Gov Design System CE's components in Angular is through the @gov-design-system-ce/angular package. This package provides Angular-specific wrappers for Gov Design System CE's Web Components, ensuring seamless integration with Angular features, such as reactive forms. To install this package, execute the following command:

1. Install provided React wrapper for Design System ​

npm install @gov-design-system-ce/angular@latest

2. Import styles, icons & fonts ​

See the for developers page.

3. Use the components in you application ​

Once you’ve installed the package, you can import Gov Design System CE’s Angular components in your application:

import { GovDesignSystemModule } from "@gov-design-system-ce/angular";

@NgModule({
  //...
  imports: [
    GovDesignSystemModule
  ],
  //...
})
export class AppModule {
}

Using Web Components in Angular ​

To enable the use of Web Components in Angular, you must import and include Angular's CUSTOM_ELEMENTS_SCHEMA. This schema permits the utilization of Web Components in HTML markup without triggering compiler errors. You should include the CUSTOM_ELEMENTS_SCHEMA in any module that employs custom elements. Typically, you can add it to the AppModule like so:

// ...
// Import custom elements schema
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  // ...
  // Add custom elements schema to NgModule
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

The last step involves loading and registering Gov Design System CE's components in the browser. The @gov-design-system-ce/components package includes a central function for this purpose, known as defineCustomElements(). It's essential to call this function once during the initialization of your application. A convenient location to do this is in your main.ts file, as shown below:

import { defineCustomElements } from "@gov-design-system-ce/components/dist/loader";

defineCustomElements(window);

Once integrated, you can use the components in your HTML markup, as demonstrated in the following example:

<gov-button color="primary" type="solid">Click me</gov-button>