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 the Angular platform. It’s one of the most popular frameworks around, which is why we created a component and demos to showcase integration with KeyLines.

This developer tutorial walks you through the commands you need to integrate Angular with KeyLines and start coding.

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:

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

Let’s start our KeyLines integration by creating a new project.

Build a graph visualization app with KeyLines & Angular CLI

Step 1: Set up your project

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

To create the project, at your terminal window, enter:

npm install tslib
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve ––open

If you’re prompted to add Angular routing, go ahead and accept the default settings.

The app is launched in your browser and the project is now set up in the my-app directory. It already contains all the necessary configuration files and some TypeScript modules to get started with your Angular app.

Now let’s add KeyLines to the new project.

Step 2: Add your KeyLines files

Once you’ve downloaded KeyLines from our SDK site (request a trial account), unzip the download into the directory that contains the my-app directory. You’ll see a new folder called keylines-#.#.#-#####.

Open my-app and install the unzipped keylines-#.#.#-##### folder as a package:

npm install ../keylines-#.#.#-#####

From the unzipped KeyLines folder, copy keylines-#.#.#-#####/angular/angular-keylines.ts to my-app/src/. The file contains useful examples of how to declare KeyLines components in the Angular style.

Finally, to add the KeyLines package to our project, update src/app/app.module.ts with:

import 'keylines';

To check we’ve set everything up correctly, go to your Angular project page and open your browser’s developer tools console. When you enter KeyLines.info() you’ll see details about the KeyLines toolkit.

Step 3: Set up KeyLines in the Angular component

To keep things simple, we’ll edit the existing Angular application component in the src/app folder.

Let’s update src/app/app.module.ts to include classes from angular-keylines.ts and have KeyLines as the first import:

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent,
    KlComponents,
    KlComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [KlComponentsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we’ll update src/app/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>

Edit src/styles.css to set dimensions for the KeyLines chart:

html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}
 
body {
  margin: 0;
}
 
.chart-container {
  width: 100vw;
  height: 100vh;
  padding: 16px;
}

Finally, let’s edit src/app/app.component.ts and add 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-app';
 
chart!: KeyLines.Chart;
 
  data: KeyLines.ChartData = {
    type: 'LinkChart',
    items: [ { type: 'node', id: 'n1', c: 'blue', t: 'Hello World!' } ]
  };
 klReady([chart]: [KeyLines.Chart]) {
    // save the chart reference
    this.chart = chart;
    // load the data into the chart
    this.chart.load(this.data);
    this.chart.layout();
  }
}

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

Here’s your simple KeyLines chart:

Another bonus: by using angular-keylines.ts you’re automatically working with a 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. You’ll find a more detailed Angular tutorial on the KeyLines SDK, together with a fully-documented demo.

Want to set up KeyLines and Angular in your own environment? Sign up to request a free trial and you’ll be coding in no time.

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