I am using Angular 4 and have primeng 4.1.0 installed
sceanrios.json
Code: Select all
{
"data":
[
{
"data":{
"name":"MGT 346 EOC Ops and Planning Exercises",
"version":""
},
"children":[
{
"data":{
"name":"EOC El Diablo Bowl Gold Activity August 2015",
"version":"1.7.5"
}
},
{
"data":{
"name":"EOC Granger County Fair 213rr - Full Add Gold FEBRUARY 2016",
"version":"1.7.5"
}
},
{
"data":{
"name":"EOC Granger County Fair 213rr - Full Add Gold June 2016",
"version":"1.7.6"
}
},
{
"data":{
"name":"EOC Granger County Fair 213rr - 12 computer Gold-August 2015",
"version":"1.7.5"
}
}
]
},
{
"data":{
"name":"Hurricane Kitty v12_SWB Edits",
"version":"1.7.7"
}
},
{
"data":{
"name":"Hurricane Kitty v12_SWB Edits_V1",
"version":"1.7.7"
}
}
]
}
Code: Select all
import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { TreeNode } from "primeng/primeng";
import 'rxjs/add/operator/toPromise';
@Injectable()
export class NodeService{
constructor(private http: Http){}
getFiles(){
return this.http.get('/assets/json/scenarios.json')
.toPromise()
.then(res => <TreeNode[]> res.json().data);
}
}
Code: Select all
import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/primeng';
import { NodeService } from '../services/nodeservice.service';
@Component({
selector: 'app-manager',
templateUrl: './manager.component.html',
styles: [require('./manager.component.css'),
require('bootstrap/dist/css/bootstrap.min.css')]
})
export class ManagerComponent implements OnInit {
emesBanner: string;
files: TreeNode[];
constructor(private nodeService: NodeService) { }
cols;
ngOnInit() {
this.emesBanner = '/assets/images/emes_banner.png';
this.nodeService.getFiles().then(files => this.files = files);
this.cols = [
{field:'name', header:'Name'},
{field:'version', header:'Version'}
];
}
}
Code: Select all
<p-treeTable [value]="files" selectionMode="single" [style]="{'margin-top':'25px'}">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-treeTable>
Code: Select all
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { TreeTableModule, SharedModule } from 'primeng/primeng';
import { AppComponent } from './app.component';
import { ManagerComponent } from './manager/manager.component';
import { NodeService } from './services/nodeservice.service';
@NgModule({
declarations: [
AppComponent,
ManagerComponent
],
imports: [
BrowserModule,
TreeTableModule,
HttpModule,
SharedModule
],
providers: [NodeService],
bootstrap: [AppComponent]
})
export class AppModule { }