Angular
This is a guide for using Triton Component Library in an Angular project.
The Triton Component Library is distributed via JFrog. To install it the project must be configured to use KDI JFrog.
Installation
First setup
Install the package with the following npm command:
npm install @kognifai/triton-cl-angular
or with yarn:
yarn add @kognifai/triton-cl-angular
Add theme to your Angular project.
Add a theme attribute to the body of the src/index.html file, located in the root of the project.
<body data-theme="day"></body>
Add fonts
To render the default font include the font assets into assets in angular.json
assets: [
...
{
"glob": "**/*",
"input": "node_modules/@kognifai/triton-cl-core/dist/assets/fonts/",
"output": "./fonts/"
},
...
]
Update Angular configuration
Add a global style to the Angular project. Go to angular.json (found in root)
styles: [
...
"node_modules/@kognifai/triton-cl-core/dist/assets/css/design-system.css",
...
]
PNext Update
Before the full release of Triton 2.0.0, a work-around is required for PNext to load the correct theme-setting on page reload. Add the following lines to App-Component.ts:
this.themeService.getSelectedTheme().then((theme) => {
this.document.body.setAttribute('data-theme', theme.value.name.toLowerCase());
});
this.themeService.themeChanged.subscribe((changes: any) => {
this.document.body.setAttribute('data-theme', changes.toLowerCase());
});
Add Legacy style
To render the legacy style include the old file into styles in angular.json
styles: [
...
{
"inject": true,
"input": "node_modules/@kognifai/triton-cl-core/legacy/css/legacy-design-system.min.css",
"bundleName": "legecy-design-system"
},
...
]
Usage
To use the components in your Angular app, you have to import the TritonCLCoreModule to the module in which you want to use any Triton components. It must also be imported as a depenency. This can be done like this:
import { TritonClCoreModule } from '@kognifai/triton-cl-angular';
...
imports: [
TritonClCoreModule,
...
]
...
Optimalization
Angular uses a library called zone.js which helps it determine when to run change detection. Certain APIs for Web Components also cause change detection to run. This can have the undesirable side effect in the app slowing down when a large number of components are initializing. To prevent this from happening, the zone.js flag that manages this portion of change detection can be disabled.
(window as any).__Zone_disable_customElements = true;
The line needs to be imported into your application's polyfills.ts file. Be sure to import it before zone.js is imported.