The Angular CLI (Command Line Interface) is one of the most popular additions to the Angular developer’s toolbox, allowing automation of the many challenges that come with developing with Angular, making it easier to get started. SpreadJS can work with Angular, so it is only natural that developers may want to use it with the Angular CLI.

This tutorial shows how to automate the creation of a simple Angular spreadsheet application with SpreadJS.

_The Angular spreadsheet final result_Setup the Angular Spreadsheet

This tutorial will focus on using the Command Prompt, so go ahead and open it.

The Angular CLI will have to be installed globally, which can be accomplished with the following command:

npm`` install -g @angular/cli When that is installed, you can create a new project with the Angular CLI. In this case, we’ll call the project “spreadjs-angular-app”. In the command prompt, navigate to where you want your application to live and type the following command:

ng ``**new**`` spreadjs-angular-app

That will create a directory with all of the required files to run an Angular application. To add SpreadJS, we can simply get the files from NPM by running the following command to install the SJS files within the project’s directory:

npm`` install @grapecity/spread-sheets @grapecity/spread-sheets-angular Once the files are installed, we will need to let the application know where they are. The first file to edit is the “angular.json” file in the project’s root.

We have to add to the “styles” and “scripts” properties:

{
    ...
    "projects": {
        "spread-sheets-app": {
            ...
            "architect": {
                "build": {
                    ...
                    "options": {
                        ...
                        "styles": [
                            "src/styles.css",
                            "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
                        ],
                        "scripts": [
                            "node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
                        ]
                    },
                    ...
                }
            }
        }
    },
    ...
}

We also want to add links to the files in the “tsconfig.app.json” file:

{
    ...
    "files: [
        ...
        "./node_modules/@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular.ts",
        "./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.d.ts"
    ],
    ...
}

The final part of the setup is to add the SpreadJS Angular spreadsheet component to the “src>app>app.module.ts” file:

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

import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular/dist/gc.spread.sheets.angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

#.net #angular #apps