Install Angular

To make it easier to integrate GC Design System web components into Angular projects, the gcds-components-angular package provides Angular wrappers.

These wrappers make it easier to work with web components in the Angular ecosystem by preventing unnecessary repaints through detached change detection, and enabling form controls to work with ngModel and reactive forms.

The web components inherit native properties and interoperability.

Angular installation instructions

Follow these steps to install and use GC Design System components in your Angular project.

1. Install the package

Navigate to your project’s root folder and run the following command:

npm install @cdssnc/gcds-components @cdssnc/gcds-components-angular

2. Import GC Design System

Place the following code in the app.module.ts file of your app:

import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    GcdsComponentsModule
  ],
  providers: [],
  bootstrap: [...]
})

export class AppModule { }

Place the following code in the styles.scss file of your app to import GC Design System styles:

@import '../node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css';

npm install @gcds-core/css-shortcuts

Add the following code in the styles.scss file of your app to import CSS Shortcuts:

@import '../node_modules/@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css';