Version: 5.1.0

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.

Installation​

First setup​

Add theme to your Angular project.​

Add fonts​

Update Angular configuration​

PNext Update​

Add Legacy style​

Usage​

Optimalization​