The Angular CLI (Command Line Interface) has become the most popular addition to the Angular developer’s toolbox, allowing automation of the many challenges that come with developing with Angular, making it easier to get started. Since Spread.Sheets can work with Angular, it is only natural that developers may want to use Spread.Sheets with the Angular CLI. This tutorial demonstrates how to automate the creation of a simple Angular spreadsheet application with Spread.Sheets.

The Angular spreadsheet final result

Set up your Angular spreadsheet

Most of the tutorial uses the Command Prompt, so go ahead and open it.

First, install the Angular CLI globally using the following command:

npm install –g @angular/cli

After that's installed, you can create a new project with the Angular CLI. In this case, we'll call the project “spread-sheets-app”. In the command prompt, navigate to where you want your application to live and type the following command:

ng new spread-sheets-app

Create a new Angular spreadsheet project

That command creates a directory with all the required files to run an Angular application. However, we still need to manually add the Spread JS, TS, and CSS files, which can be found in these locations in the Spread.Sheets folder, once extracted:

  • scripts/gc.spread.sheets.all.11.0.0.min.js
  • definition/GC.Spread.Sheets.d.ts
  • css/gc.spread.sheets.excel2013darkgray.11.0.0.css
  • scripts/interop/angular/gc.spread.sheets.angular.11.0.0.js
  • scripts/interop/angular/gc.spread.sheets.angular.11.0.0.d.ts

Make a directory called “lib” in the “src” directory for the project, and copy the above files to that location. Then we'll reference the Spread.Sheets JS and CSS files in the “.angular-cli.json” file, which can be found in the root folder of the project:

{
  (…)
  "apps": [
    {
      (…)
      "styles": [
        "./lib/gc.spread.sheets.excel2013darkGray.11.0.0.css"
      ],
      "scripts": [
        "./lib/gc.spread.sheets.all.11.0.0.min.js"
      ],
      (…)
    }
  ],
  (…)
}

To finish setup, modify the “app.module.ts” file located in the src/app folder in the root application folder to import the Spread.Sheets Angular module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SpreadSheetsModule } from '../lib/gc.spread.sheets.angular.11.0.0';
import { AppComponent } from './app.component';

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

Add HTML and script code for the Angular spreadsheet app

In the same folder, modify the “app.component.html” to show the Spread.Sheets component:

<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
  <gc-worksheet [name]="sheetName" [dataSource]="data">
    <gc-column dataField="name" headerText="Name" width=310></gc-column>
    <gc-column dataField="chapter" headerText="Chapter" width=150></gc-column>
    <gc-column dataField="page" headerText="Page" width=150></gc-column>
  </gc-worksheet>
</gc-spread-sheets>

The rest of our script code will be added to the “app.component.ts” file located in the same folder. As a start, we can initialize the component with some preliminary variables:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    spreadBackColor = 'aliceblue';
    sheetName = 'Java 101 Chapters';
    hostStyle = {
        width: '800px',
        height: '600px'
    };
    data: any;
    rowOutlineInfo: any;
    showRowOutline = true;
}

In this demo, we are going to bind to data, so add a constructor function in the AppComponent class with a data set in it:

constructor() {
    // This is the base data that we will bind to the Spread instance
    let commands = [
        { name: 'Preface', chapter: '1', page: 1, indent: 0 },
        { name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1 },
        { name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2 },
        { name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1 },
        { name: 'Changes', chapter: '1.2.1', page: 3, indent: 2 },
        { name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1 },
        { name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1 },
        { name: 'Introduction', chapter: '2', page: 9, indent: 0 },
        { name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1 },
        { name: 'Learning Java', chapter: '2.2', page: 10, indent: 1 },
        { name: 'Goals', chapter: '2.3', page: 10, indent: 1 },
        { name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1 },
        { name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1 },
        { name: 'Exercises', chapter: '2.6', page: 12, indent: 1 },
        { name: 'Foundations for Java', chapter: '2.7', page: 12, indent: 1 },
        { name: 'Source code', chapter: '2.8', page: 12, indent: 1 },
        { name: 'Coding standards', chapter: '2.8.1', page: 14, indent: 2 },
        { name: 'Errors', chapter: '2.9', page: 14, indent: 1 },
        { name: 'Introduction to Objects', chapter: '3', page: 15, indent: 0 },
        { name: 'The progress of abstraction', chapter: '3.1', page: 15, indent: 1 },
        { name: 'An object has an interface', chapter: '3.2', page: 17, indent: 1 },
        { name: 'An object provides services', chapter: '3.3', page: 18, indent: 1 },
        { name: 'The hidden implementation', chapter: '3.4', page: 19, indent: 1 },
        { name: 'Reusing the implementation', chapter: '3.5', page: 20, indent: 1 },
        { name: 'Inheritance', chapter: '3.6', page: 21, indent: 1 },
        { name: 'Is-a vs. is-like-a relationships', chapter: '3.6.1', page: 24, indent: 2 },
        { name: 'Interchangeable objects with polymorphism', chapter: '3.7', page: 25, indent: 1 },
        { name: 'The singly rooted hierarchy', chapter: '3.8', page: 28, indent: 1 },
        { name: 'Containers', chapter: '3.9', page: 28, indent: 1 },
        { name: 'Parameterized types (Generics)', chapter: '3.10', page: 29, indent: 1 },
        { name: 'Object creation & lifetime', chapter: '3.11', page: 30, indent: 1 },
        { name: 'Exception handling: dealing with errors', chapter: '3.12', page: 31, indent: 1 },
        { name: 'Concurrent programming', chapter: '3.13', page: 32, indent: 1 },
        { name: 'Java and the Internet', chapter: '3.14', page: 33, indent: 1 },
        { name: 'What is the Web?', chapter: '3.14.1', page: 33, indent: 2 },
        { name: 'Client-side programming', chapter: '3.14.2', page: 34, indent: 2 },
        { name: 'Server-side programming', chapter: '3.14.3', page: 38, indent: 2 },
        { name: 'Summary', chapter: '3.15', page: 38, indent: 1 },
        { name: 'End', chapter: '', indent: null }
    ];
}

This data is laid out with row outlining in mind, so we can add some code to that constructor to create row outlines for each row in the data source. The following logic creates row outlines based on the “indent” value for each data row, and indents them for the specified spaces, as well:

// Create a rowOutlineInfo object for each row
this.rowOutlineInfo = [];
for (let r = 0; r < commands.length; r++) {
    var subRows = 0;
    // Get the number of rows that subrows to the current one and add them to the outline
    for (let r2 = r + 1; r2 < commands.length; r2++) {
        if (commands[r2].indent > commands[r].indent) {
            subRows++;
        }
        if ((r2 == (commands.length - 1)) || (commands[r2].indent == commands[r].indent)) {
            var i = { index: r + 1, count: subRows }
            this.rowOutlineInfo.push(i);
            break;
        }
    }

    // Add tabs based on the indent column
    for (let i = 0; i < commands[r].indent; i++) {
        commands[r].name = "\t\t\t\t\t" + commands[r].name;
    }
}

Then set the data for the Spread instance:

// Set the data for Spread
this.data = commands;

Now that we set the variables in the script code, we need to make sure to set those attributes in the HTML as well (in this case just “showRowOutline” and “rowOutlineInfo”):

<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
  <gc-worksheet [name]="sheetName" [dataSource]="data" [showRowOutline]="showRowOutline" [rowOutlineInfo]="rowOutlineInfo">
    (…)
</gc-spread-sheets>

Build and run your Angular spreadsheet

Now that the code is complete, we need to build and run the application. To do that, go back to the command prompt and enter the following command:

ng serve

Once that builds successfully, you can view the application by navigating to “localhost:4200” in a web browser:

Angular is just one of the many frameworks that Spread.Sheets can be combined with. The Angular CLI makes creating an application easy, and Spread.Sheets makes displaying your data even easier.

Download SpreadJS 11