Generic UI Grid in Angular CLI

In this guide we will cover how quick and easy is creating your first Generic UI Grid in Angular CLI project.

First you need to make sure you have node and npm installed on you system. You can check your node version and npm version by typing this in you console:

node -v
npm -v

If you do not have the NodeJS platform installed you can do so by following its official guide on nodejs.org.

Installing Angular CLI

Now that you have node on you system, we can install Angular CLI using the npm package manager:

npm install -g @angular/cli@8.0.0

Creating Angular CLI project

We start off by generating new CLI project. Navigate to the folder you wish to place your project and type this in your console

ng new gui-grid-cli

When asked about routing and stylesheet you can chose either.

Adding Generic UI Grid to the project

Navigate to you project directory with:

cd gui-grid-cli

and install Generic UI Grid and resize detector by typing this in your project directory:

npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes element-resize-detector@1.1.14

Creating Generic UI Grid element

This section covers some of the key steps in building Generic UI Grid.

Importing GridModule

Most importantly, you need to add GridModule in the app.module.ts file. Also, don't forget to import GridModule from @generic-ui/ngx-grid.

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

import { AppComponent } from './app.component';
import { GridModule } from '@generic-ui/ngx-grid';

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

Now that we have added GridModule to our project we can move to the next step.

Creating simple source and columns variables

In order to build grid you need to have source and columns specified. In app.component.ts create variable named as source and paste the code below:

  source: Array<any> = [
    {
      name: 'Brad',
      job: 'programmer',
      age: '40'
    },
    {
      name: 'John',
      job: 'athlete',
      age: '22'
    },
    {
      name: 'Eve',
      job: 'artist',
      age: '25'
    }];

With our source defined we can now create columns variable.

 columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name'
    },
    {
      header: 'Job',
      field: 'job'
    },
    {
      header: 'Age',
      field: 'age'
    }];

Creating gui-grid element

Open up the app.component.html and create the <gui-grid></gui-grid> element. With columns and source specified all we need to do now is to pass them in the <gui-grid> selector as inputs:

<gui-grid [source]="source"
          [columns]="columns">
</gui-grid>

Final code

<gui-grid [source]="source"
          [columns]="columns">
</gui-grid>

import { Component } from '@angular/core';
import { GuiColumn } from '@generic-ui/ngx-grid';

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

  columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name'
    },
    {
      header: 'Job',
      field: 'job'
    },
    {
      header: 'Age',
      field: 'age'
    }];

  source: Array<any> = [
    {
      name: 'Brad',
      job: 'programmer',
      age: '40'
    },
    {
      name: 'John',
      job: 'athlete',
      age: '22'
    },
    {
      name: 'Eve',
      job: 'artist',
      age: '25'
    }];
}

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

import { AppComponent } from './app.component';
import { GridModule } from '@generic-ui/ngx-grid';

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

Basics of Angular Grid Library

Generic UI Grid