Using Angular CLI to get started with KeyLines

If you’re a JavaScript developer, you’ll already know how easy it is to build web applications using Angular. It’s one of the most popular frameworks around, which is why we created a component and demos to showcase integration with KeyLines.

Angular is great for simplifying the way you develop and test your graph visualization application, but, until recently, getting started with the framework took some effort. You had to start from scratch for every Angular project – setting up the project structure, manually configuring tools, dependencies and test frameworks, managing modules, optimizing builds and so on. It’s all necessary, but the time it takes would be better spent writing code.

Angular Command Line Interface (CLI) makes setting up and working with Angular projects much faster and easier. You get all the benefits of a modern, front-end development tool – including hot-reloading, compiling TypeScript, module support, testing and deploying – without the heavy lifting.

What is Angular CLI?

The Angular team released their CLI tool back in early 2017. It’s designed to help Angular web developers automate their workflow, make projects more consistent, and follow best practices. There’s complete documentation available from the Angular CLI GitHub wiki page.

How does this help with developing your KeyLines application? It means you can:

• easily initialize and scaffold a generic Angular project structure
• take advantage of the CLI build tools and development utilities
• test and deploy your finished graph visualization application faster

This blog walks you through the commands you need to integrate Angular with KeyLines and start coding. Let’s start by creating a new project.

Building a graph visualization application with KeyLines and Angular CLI

Step 1: Set up your project

First, make sure you’ve got Node.js installed (you’ll get npm in the download too).

Next, the easiest thing to do is to install Angular CLI as a global module. To do this, at your terminal window, enter:

npm install -g @angular/cli
ng new my-project

The project is now set up in the ‘my-project’ directory. It already contains all the necessary configuration files and some TypeScript modules to get started.

Every time you create a new component, you’ll be adding the main bulk of code to the src/ folder. You’ll see there’s already a component in there called app.

Now let’s add KeyLines to the new project.

Step 2: Add your KeyLines files

Once you’ve downloaded the KeyLines ZIP file from our SDK site (request a trial account here), you’ll need to move certain files into your Angular project:

1. Move js/keylines.js into the src/ folder.
   This is the main library containing KeyLines functionality.
2. Move angular/angular-keylines.ts into the src/ folder.
   This file contains useful examples of how to declare KeyLines components in the Angular style.
3. Move ts/keylines.d.ts into the src/ folder.
   This contains detailed type definitions of KeyLines functions, options and events to make coding in TypeScript much easier.
4. Move the contents of the /assets/ folder into src/assets.
   This contains the image file directory that includes icons for chart navigation controls.

Your folder structure should look like this:

You’ll also need to edit the Angular project’s JSON file. KeyLines declares a global variable, so we have to make sure Angular can understand the configuration. To do this:

1. Open angular.json.
2. Include a reference to “src/keylines.js” in the“scripts” array
   [“projects”][“my-project”][“architect”][“build”][“options”][“scripts”].

Here’s how the JSON file should look:

A quick note about the KeyLines assets folder. If you followed the instructions and moved it to “src/assets”, you don’t need to do anything. If you moved it to another folder, you’ll need to include a reference to its new location in the “assets” array.

Step 3: Set up KeyLines in the Angular component

Now we’re ready to start setting up the KeyLines chart in our component. To keep things simple, we’ll edit the existing application component in the src/app folder.

First, edit app.module.ts to include classes from angular-keylines.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { KlComponent, KlComponents, KlComponentsService } from '../angular-keylines';

@NgModule({
  declarations: [
    AppComponent,
    KlComponents,
    KlComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [KlComponentsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, edit app.component.html to inject the components into our template:

<kl-components (klReady)='klReady($event)'>

  <!-- chart -->
  <kl-component klType='chart' klContainerClass='chart-container'></kl-component>
  
  <!-- timebar -->
  <kl-component klType='timebar' klContainerClass='timebar-container'></kl-component>

</kl-components>

We can then edit src/style.css to set the appropriate dimensions for the KeyLines chart and time bar:

.chart-container {
  width: 400px;
  height: 400px;
}

.timebar-container {
  width: 400px;
  height: 200px;
}

Finally, edit app.component.ts by adding a handler to the klReady event:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-project';

  public chartStyle: {} = {
    height: '400px'
  };
  
  klReady = ([chart, timebar]) => {
    console.log('chart ready', chart);
    console.log('timebar ready', timebar);
  };
}

The klReady function now gives you access to the chart and time bar objects, and in turn, the full power of the KeyLines API.

For example, if you want to load some data and run a layout, use the klReady function:

chart.load(data).then(() => chart.layout(‘standard’));

To run the application, use the Angular CLI command:

ng serve ––open

Another bonus: by using angular-keylines.ts you’ll automatically be working with the version of KeyLines that supports JavaScript ES6 Promises. This gives you cleaner ways to manage your async workflows and take advantage of other modern JavaScript features. Learn more about using Promises with KeyLines.

Ready to try?

You’ve seen how quick and easy it is to get your KeyLines project set up using Angular CLI, so you can focus on developing your graph visualization application. Want to set up KeyLines and Angular in your own environment? Sign up to request a free trial – you’ll be coding in no time.

The post Using Angular CLI to get started with KeyLines appeared first on Cambridge Intelligence.