Introduction to Angular Generic UI Grid
In this guide, we will cover how quick and easy it is creating your first Generic UI Grid in the Angular CLI project.
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.
Installing Angular CLI
Now that you have a node on your system, we can install Angular CLI using the npm package manager:
$ npm i -g @angular/cli@8.0.0
Creating an Angular CLI project
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.
Adding Generic UI Grid to the project
Navigate to your 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 a Generic UI Grid element
This section covers some of the key steps in building a Generic UI Grid.
Importing GuiGridModule
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 { GuiGridModule } from '@generic-ui/ngx-grid';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GuiGridModule
],
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 { GuiGridModule } from '@generic-ui/ngx-grid';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GuiGridModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }