Angular Reference

Third Party Integrations

Introduction

KeyLines is compatible with many JavaScript frameworks, including Angular. You can write your own Angular component, or you can use the example which is available in angular-keylines.js when you download KeyLines.

Our component is written in TypeScript, and can be used with modern bundlers such as Webpack or Vite.

Our component is up to date with the latest KeyLines API and regularly tested against the most recent Angular version, so we recommend using the latest version of the component for best performance and compatibility.

To help you get started, we've put together an Angular Tutorial as well as an Angular Integration demo.

Reference

This section explains the kl-components and kl-component components found in angular-keylines.ts and lists all the optional properties that are available in the wrapper to specify the various elements of the KeyLines chart.

kl-component

kl-component is an Angular component that contains a KeyLines chart or timebar.

<kl-component
  id='string'
  klContainerClass='string'
  klEvents='function'
  klReady='function'
  klOptions='object'
  klType='string'
>
</kl-component>
PropertyTypeDescription
idstringThe id which will be assigned to the component's canvas element.
klContainerClassstringThe name of the CSS class to be assigned to the container div of the KeyLines component.

klEvents

function

Attaches all event handling code provided for the Angular component. Uses the following object format:

{
  name: //the name of the event (e.g: click),
  args: //an array of the event's arguments,
  preventDefault: //true|false: override the default behaviour,
}

See how this works in the Step 7 of Using KeyLines with Angular. See available events in the Chart Events and Time Bar Events APIs.

klReady

function

A function name to callback when the KeyLines component is ready to use.

The argument passed in will be the component set up as specified.

klOptionsobjectOverrides the default options of your component's APIs once the component is created. See the available Chart options and Time Bar options APIs.
klTypestringThe type of KeyLines component: either 'chart' or 'timebar'. Defaults to 'chart'.

kl-components

kl-components is a wrapper required around kl-component and any other child KeyLines components.

<kl-components
  klImagesPath='string'
  klReady='function'>

  <!-- <kl-component> wrapped here -->

</kl-components>
PropertyTypeDescription
klImagesPathstringThe path to image resources. For more information, see KeyLines.paths().
klReadyfunctionA function called when all the child KeyLines components are ready to use. This in an easy way to get access to your component's API, passed as an argument of the function.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.