Angular
Angular
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/fontsStep two
In theapp.modules.ts
file, import theCUSTOM_ELEMENTS_SCHEMA
.
Or for standalone components, import theCUSTOM_ELEMENTS_SCHEMA
into the.ts
file of any component using the components from this Design System.
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";Step three
Then include it in the@NgModule
decorator object. Or for standalone components, include it in the@Component
decorator object.
// Modules
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
// Standalone components
@Component({
selector: 'app-foo',
standalone: true,
imports: [],
templateUrl: './foo.component.html',
styleUrl: './foo.component.scss',
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
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>