TableauLib

This project was generated with Angular CLI version 8.3.23.

Installing the library

We want to use the library in our application so we use npm install like this: npm install urlToUnilogTable/unilog-table/dist/unilog-table/unilog-table-0.0.1.tgz

Importing the library module

In order to actually use a component from the library we need to add the library’s module to our App Module. To do this we make two changes in: src\app\app.module.ts

• Import the UnilogTableModule:

$import {UnilogTableModule} from '@unilog/table'

• Add the UnilogTableModule to the imports array in our AppModule:

Your app.module.ts file should look like this:

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

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

import {UnilogTableModule} from '@unilog/table'
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent  ],
  imports: [ 
    BrowserModule,
    UnilogTableModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([])
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Actually using a component from our library

In our application modify the html template of a component and display the avt-listes from the library. After making the changes, component.html should look something like this:

<app-table #tableComponent [source]="data">

</app-table >

And the file component.ts looks for example like this :

import { Component, ViewChild, OnInit} from '@angular/core';
import {TableComponent} from '@unilog/table'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
 
  heightTable : string = "400";
datasource= [{name: "ahmed",age: 19},{name: "mohamed",age:20},{name: "mohamed",age:20}]
columns=
  {
    "TableRD":
              [
                {
                  "TableRE_Code":"",
                  "TableRD_Champs":"name",
                  "Lg_Code":"",
                  "TableRD_Des":"Name",
                  "TableRD_Largeur":100,
                  "TableRD_ReadOnly":true,
                  "TableRD_Format":null,
                  "TableRD_Alligement":0,
                  "TableRD_Ordre":1,
                  "TableRD_Type":0,
                  "TableRD_Param1":null,
                  "TableRD_Param2":null,
                  "TableRD_ValDef":null,
                  "TableRD_Tri":true,
                  "TableRD_Valid":null,
                  "TableRD_ValidType":0,
                  "TableRD_ExpressionH":null,
                  "TableRD_ExpressionR":null,
                  "User_Id":"*"
                  ,"User_Groupe":null
                },
                {
                  "TableRE_Code":"",
                  "TableRD_Champs":"age",
                  "Lg_Code":"",
                  "TableRD_Des":"Age",
                  "TableRD_Largeur":100,
                  "TableRD_ReadOnly":true,
                  "TableRD_Format":null,
                  "TableRD_Alligement":0,
                  "TableRD_Ordre":1,
                  "TableRD_Type":6,
                  "TableRD_Param1":null,
                  "TableRD_Param2":null,
                  "TableRD_ValDef":null,
                  "TableRD_Tri":true,
                  "TableRD_Valid":null,
                  "TableRD_ValidType":0,
                  "TableRD_ExpressionH":null,
                  "TableRD_ExpressionR":null,
                  "User_Id":"*"
                  ,"User_Groupe":null
                }
              ]
    };
    listBtn:Array<any> = 
    [
      {name:"ajouter",class:"colorBlue",text:"Ajouter",typeBtn:"form"},
      {name:"modifier",class:"colorGreen",text:"Modifier",typeBtn:"form"},
      {name:"supprimer",class:"colorRed",text:"Supprimer"}
    ]
    data = {
      listBtn:[],
      displayedColumnsBrut:{},
      dataSourceBrut:[],
      heightTable: "",
      colonnes:[],
      multipleSelect: false,
      api: "",
      showFilter: true
  }
    @ViewChild("tableComponent",{static:false}) tableComponent  : TableComponent;

    constructor(){}

    ngOnInit(){
      this.data.displayedColumnsBrut = this.columns
      this.data.dataSourceBrut = this.datasource
      this.data.heightTable = this.heightTable
      this.data.listBtn = this.listBtn
    }
clickBtnHeat(event)
  {
    
    switch (event.name)
    {      
      case "ajouter":
      {
        console.log('ajouter')
        console.log(event.form)
        if(event.form.dataAfter != undefined)
        {
          this.datasource.push(event.form.dataAfter)
          console.log(this.datasource)
          this.tableComponent.setDataSource(this.datasource)
        }
        break;
      }
      case "modifier":
      {
        console.log('mod')
        var index = this.datasource.indexOf(event.row)
        this.datasource[index] = event.form.dataAfter
        console.log(this.datasource)
        this.tableComponent.setDataSource(this.datasource)
        break;
      }
      case "supprimer":
      {
        console.log('supp')
        break;
      }
      case "selectRow":
      {
        console.log('select')
        break;
      }
    }
  }
}

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.