Extensions

Angular tutorial

How to use our JavaScript based Gantt chart components in an Angular app.

Introduction

DlhSoft has developed Gantt Chart Hyper Library using pure JavaScript and has also introduced TypeScript definitions for its components later. By that time another technology that was widely used was AngularJS, so we have built extension directives on top of our library, too, targeting that platform. In the meantime, however, Angular has evolved into a completely different framework, reaching — at the time of writing this text — version 8.

This tutorial assumes you have a machine that is able to run this new technology, and that you are fine with having Node.js and other Web tools installed on your system. If you're running an even newer version of Angular (that may have been recently published), don't worry, most probably all the commands will continue to run with very little or no changes at all. Also note that commands presented in this tutorial are for Windows based development systems, but macOS and Linux can also be used (and differences are indicated wherever they matter.)

Setting up your Angular app

In this tutorial we'll show how you can create an Angular app and then integrate DlhSoft Gantt chart components in its code. If you already have an Angular app and experience with the tools, see technical documentation instead.

  • Install Node.js

    Angular requires Node.js version 10.9 or later, and npm (its node package manager). You can download and install it from nodejs.org.

  • Get Angular CLI

    The command language interface (CLI) is used to create, build, run, and deploy custom Angular apps. Note that -g flag indicates that the package is installed globally, rather than the current folder.

    
    npm install -g @angular/cli
    
  • Create an app

    You can now use Angular CLI to create a new app. The ng new command below will create a new folder containing everything needed for development, so you should run it in Command prompt (or Terminal) after you changed the path to your root projects folder (whichever you choose.) Note that it will also prompt you for information about features to include in the initial app — accept the defaults by pressing the Enter key.

    
    cd projects
    ng new my-app
    

  • Build, run and test the app

    Angular CLI also allows you to build and run the app by hosting a local Web server on your machine — accessible from a browser at http://localhost:4200.

    
    cd my-app
    ng serve --open
    

  • Deploying for production purposes

    Finally, you'll need to deploy the results for distribution purposes (into a subfolder of your project, dist). You can test this command now and/or only after you have also added DlhSoft components to the app (after the following section.)

    
    ng build --prod
    

Get DlhSoft components

Our pure JavaScript components are not enclosed in a high level package — but they are available for download as .zip or .tar files. This means that they will not update automatically, but this is, in our opinion, a more generic approach. You can surely download the most up to date archive file whenever you need to use a more recent build, however, and we encourage you to subscribe to our core product news feed to know when new features arrive.

  • Download libraries

    You can either download DlhSoft components directly as a .zip file (as stated above) and extract it yourself wherever you'd like (to be saved for further reference), or you can use npm to get them into your app's node_modules subfolder as you do with your other packages. The difference is that you point npm to an URL rather than a package name.

    
    npm install http://DlhSoft.com/Packages/DlhSoft.GanttChartHyperLibrary.tar
    
  • Determine which scripts you need

    Open the extracted folder. In Windows, you can use explorer command, while on macOS and Linux open command should be used to view the contents of the destination folder. (Alternatively, you can run dir or ls commands to view the results directly in your Command Prompt or Terminal window; on macOS and Linux use slash / character to separate path parts.)

    
    dir node_modules\DlhSoft.GanttChartHyperLibrary
    

    The files below are available for you to use in your Angular app. The appropriate core .js and .d.ts (TypeScript definition) files are needed for the Angular extension components to work. Make sure you do not load Angular.Directive.js files (they represent AngularJS extensions, not Angular 8 components). Other files are also available inside the folder, but you can safely ignore them.

    Category Details Files
    Core JavaScript components Gantt chart, schedule chart, load chart
    PERT chart, network diagram
    DlhSoft.ProjectData.GanttChart.HTML.Controls.js, .d.ts
    DlhSoft.ProjectData.PertChart.HTML.Controls.js, .d.ts
    Optional UI enhancers Date-time picker, multi-selector combo box DlhSoft.Data.HTML.Controls.js, .d.ts
    Optional XML import/export Project serializer DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js, .d.ts
    Angular extensions Gantt chart, schedule chart, load chart
    PERT chart, network diagram
    DlhSoft.ProjectData.GanttChart.Angular.Components.ts
    DlhSoft.ProjectData.PertChart.Angular.Components.ts
  • Copy the necessary files

    The files in node_modules/DlhSoft.GanttChartHyperLibrary subfolder are not immediately available to use in your Angular app. You need to copy the files you need into one of your app's main folders, first. (We admit that if we'd have defined a JSON package files for our product this step would have been easier, but as previously indicated, we wanted to go with a more generic approach that wouldn't depend on any specific metadata in the archives to make things work.)

    Your Angular app includes a src subfolder where all your source code will eventually go. You'll find an app folder inside it, and we recommend you to create another subfolder there to host DlhSoft files (e.g. using mkdir command.) Copy the files using either Explorer or Finder, or using command lines.

    
    mkdir src\app\DlhSoft
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.GanttChart.HTML.Controls.js src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.GanttChart.HTML.Controls.d.ts src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.PertChart.HTML.Controls.js src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.PertChart.HTML.Controls.d.ts src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.Data.HTML.Controls.js src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.GanttChart.Angular.Components.ts src\app\DlhSoft\
    copy node_modules\DlhSoft.GanttChartHyperLibrary\DlhSoft.ProjectData.PertChart.Angular.Components.ts src\app\DlhSoft\
    
  • Reference core scripts

    Find angular.json file in the root folder of your Angular project, and edit it to include references to the DlhSoft core scripts (.js files) under architect/build/options/scripts section. This will ensure that upon building the DlhSoft source code will also be included in the output script bundle generated for your app.

    
    {
      …,
      "projects": {
      "my-app": {
        …,
        "architect": {
          "build": {
              …,
              "options": {
                …
                "scripts": ["src/app/DlhSoft/DlhSoft.ProjectData.GanttChart.HTML.Controls.js",
                            "src/app/DlhSoft/DlhSoft.ProjectData.PertChart.HTML.Controls.js",
                            "src/app/DlhSoft/DlhSoft.Data.HTML.Controls.js"]
      …
    }
    
  • Import Angular components

    Find app.module.ts file in the src/app subfolder of your project, and edit it to import the appropriate DlhSoft Angular components, those that you would need in certain screens of your app.

    
    …
    import { GanttChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
    import { ScheduleChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
    import { LoadChartView } from './DlhSoft/DlhSoft.ProjectData.GanttChart.Angular.Components';
    import { PertChartView } from './DlhSoft/DlhSoft.ProjectData.PertChart.Angular.Components';
    import { NetworkDiagramView } from './DlhSoft/DlhSoft.ProjectData.PertChart.Angular.Components';
    @NgModule({
      declarations: [
        AppComponent,
        GanttChartView, ScheduleChartView, LoadChartView,
        PertChartView, NetworkDiagramView
      ],
      …
    })
    …
    
  • Use DlhSoft components in your markup

    To use Dlhsoft Angular components you simply need to place appropriately named elements in your markup files (defining the user interface of your screens), e.g. app.component.html, and set up the properties — items, settings, license, change — to the data you will also need to prepare for them in code.

    
    <ganttchartview [items]="items" [settings]="settings" [license]="license"
                    [change]="onItemChanged" style="min-height: 388px">
        …
    </ganttchartview>
    

    The elements that can be used are listed below, mapped to the specific components they reference.

    Component Element Details
    GanttChartView ganttchartview Singe bar per row, e.g. project with tasks
    ScheduleChartView schedulechartview Multiple bars per row, e.g. tasks assigned to resources
    LoadChartView loadchartview Allocations over time, e.g. resource load percents
    PertChartView pertchartview PERT diagram, e.g. tasks displayed as arrows
    NetworkDiagramView networkdiagramview Network diagram, e.g. PERT methodology
  • Set up data

    As mentioned in the previous step, you will need to also set up data for the component's properties in your TypeScript code, e.g. in app.component.ts, under AppComponent class definition. Import the classes you need (such as GanttChartView, GanttChartItem, PredecessorItem, and so on), define the properties and functions that you want to expose (such as items, settings, onItemPropertyChanged), and initialize their values in your app component's constructor. To set up the actual values of the items and settings to be bound to a specific Angular component, use the fields supported by the core component, as detailed in core product's technical reference.

    
    import { Component, Output } from '@angular/core';
    import GanttChartView = DlhSoft.Controls.GanttChartView;
    import GanttChartItem = GanttChartView.Item;
    import GanttChartSettings = GanttChartView.Settings;
    import PredecessorItem = GanttChartView.PredecessorItem;
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'GanttChartView sample';
      items: GanttChartItem[];
      settings: GanttChartSettings;
      license = '…'; // upon purchasing a product license from DlhSoft
      onItemChanged: (item: GanttChartItem, propertyName: string, isDirect: boolean, isFinal: boolean) => void;
    
      constructor() {
        var item1 = <GanttChartItem>{ content: 'My summary task' };
        var item2 = <GanttChartItem>{ content: 'My standard task', indentation: 1,
                                      start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), 
                                      completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' };
        var items = <GanttChartItem[]>[ item1, item2 ];
        var item3 = <GanttChartItem>{ content: 'My milestone', indentation: 1,
                                      start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true };
        items.push(item3);
        …
        this.items = items;
        this.settings = { … };
        this.onItemChanged = (item, propertyName, isDirect, isFinal) => {
          console.log(propertyName + ' changed for ' + item.content + '.');
        }
      }
    }
    

    Properties that you may provide values for (applying to all components) are listed below.

    Property Details
    items Actual data to be presented (e.g. task or resource items, depending on the specific component, see technical reference)
    settings Customizations for the appearance and behavior of the component (see technical reference)
    license String value generated by DlhSoft License Manager tool upon purchasing a product license (to remove nag screens)
    change Function that would be called upon client side changes