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

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

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

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.

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

npm install -g @angular/cli

For more information visit the official angular cli guide.

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

ng new gui-grid-cli

When asked about routing and stylesheet you can choose either.

Navigate to your project directory with:

cd gui-grid-cli

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

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

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

Most importantly, you need to add GuiGridModule in 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.

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'
    }
];

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>

<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 { }

You can see code for this example in this github repository: Angular 12 with the grid library