Install Nx CLI Generic UI Grid

In this guide, we will cover how quick and easy it is to create your first Generic UI Grid in the Nx project. We will build a simple grid example, it will look like that:

You can see the final results in this Github repository: https://github.com/generic-ui/generic-ui-grid-nx

Nx Setup

First, you need to make sure you have installed the nx cli. You can find the official installation guide here: Nx setup.

Creating an Nx Angular project

We start off by generating a new Nx project with a preset for the Angular. Navigate to the folder you wish to place your project and type this in your terminal:

npx create-nx-workspace --preset=angular

You can select a name for the workspace e.g. nx-grid

After the process is complete navigate to your project directory with:

cd nx-grid

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

npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes

Creating a Generic UI Grid element

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

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

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

import { GuiGridModule } from '@generic-ui/ngx-grid';

import { AppComponent } from './app.component';


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

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

Creating simple source and columns variables

In order to build a grid, you need to have source and columns specified. In app.component.ts create a 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 { GuiGridModule } from '@generic-ui/ngx-grid';

import { AppComponent } from './app.component';


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

Your repository should look this one: https://github.com/generic-ui/generic-ui-grid-nx