Angular - Intelligence Community Design System

Show navigation section

Step one

In the root of your project:

# using npm
npm install @ukic/web-components @ukic/fonts

# using yarn
rm package-lock.json
yarn add @ukic/web-components @ukic/fonts

Step two

Import theCUSTOM_ELEMENTS_SCHEMA :

For modules

Into theapp.module.ts file:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

For standalone components

Into theapp.component.ts file:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";

Step three

IncludeCUSTOM_ELEMENTS_SCHEMA in the decorator object in the same file:

For modules

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

For standalone components

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Step four

Set skipLibCheck totrue in yourtsconfig.json file.

"compilerOptions": {
  "skipLibCheck": true
},

Step five

Import defineCustomElements in yourmain.ts file.

import { defineCustomElements } from "@ukic/web-components/loader";

Step six

Call defineCustomElements at the bottom ofmain.ts :

//other configuration
...
defineCustomElements();

Step seven

Add the following into the top level CSS file for your project. For newly generated Angular projects this will besrc/styles.css .

@import "@ukic/fonts/dist/fonts.css";
@import "@ukic/web-components/dist/core/core.css";

In order to be rendered consistently across browsers and in line with modern standards, each of the components uses styles from a global CSS file based on Normalize.css .

If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the components, add the following into the top level CSS file as well.

@import "@ukic/web-components/dist/core/normalize.css";

Step eight

Declare the component in yourapp.component.html file.

<ic-status-tag label="Neutral"></ic-status-tag>

Last reviewed 23 December 2024 .