This blog was originally published on February 14, 2017 for Wijmo Japan.

Angular not only extends framework features, but also has ability to improve the development efficiency. You can create an Angular application very easily by using a command line tool called Angular CLI. Since Wijmo has first-class Angular support, you can use Wijmo’s advanced UI components meant for enterprises—such as grid, input, and chart—with Angular’s standard methodology.

This article walks through creating an Angular application using Angular CLI and Wijmo. The app manages data in a grid, and you can use it as a sample or a tutorial while developing Angular applications.

In this article, we're using the following library versions:

• Angular 2.4.0
• Angular CLI 1.0.0-beta.31

Creating an Angular Application

If you haven't installed Angular CLI, execute the following command to install the Angular CLI package globally.

npm install -g @angular/cli

Execute the ng new command to create an Angular application. After a while, the application source file and configuration file are generated automatically and the package gets installed.

ng new quickstart

Go to the application project folder and execute the ng serve command to run the application on the development server. The application can be displayed at http://localhost:4200, and the changes get reflected automatically when you change the source file.

cd quickstart  
ng serve  

Add the Wijmo Component

Execute the following command to install Wijmo package in the project. If you're using the full version of Wijmo, refer to the NpmImages folder of the version.

# In case of evaluation version  
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20163.254.tgz  

# In case of full version  
npm install --save xxx/NpmImages/wijmo-amd-min/  

Fetch the wijmo.min.css file from CDN or Wijmo full version and add it to the src folder of the project.

Add wijmo.min.css file in the angular-cli.json file.

{  
  "apps": [  
    {  
      "styles": [  
        "styles.css",  
        "wijmo.min.css"  
      ],  
    }  
  ],  
}  

Import the WjGridModule module in the src/app/app.modules.ts file.

import { WjGridModule } from 'wijmo/wijmo.angular2.grid';  

@NgModule({  
 :  
  imports: [  
 :  
    WjGridModule  
  ]  
})  

Add FlexGrid component in the src/app/app.component.html file.

<wj-flex-grid [itemsSource]="data"></wj-flex-grid>

Create the data to be displayed in the grid in the src/app/app.component.ts file.

export class AppComponent {  
  data: any;  
  constructor() {  
    this.data = [  
      { id: 1, name: '果汁100%レモン', price: 100 },  
      { id: 2, name: 'コーヒーマイルド', price: 100 },  
      { id: 3, name: 'ピリピリビール', price: 200 },  
      { id: 4, name: 'ホワイトソルト', price: 150 },  
      { id: 5, name: 'だしこんぶ', price: 200 }  
    ];  
  }  
}  

These steps create a simple quick start application. Execute the ng serve command and connect to http://localhost:4200 to observe the FlexGrid component in the Angular application.