<!DOCTYPE html>
<html>
<head>
<title>Angular 2 - Typescript in runtime</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://unpkg.com/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng/resources/primeng.min.css" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.26?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script>
System.config({
//use typescript for compilation
transpiler: 'ts',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'rxjs-compat': 'npm:rxjs-compat',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript/lib/plugin.js',
'typescript': 'npm:typescript/lib/typescript.js',
'@uirouter/core': 'npm:@uirouter/core/_bundles/ui-router-core',
'@uirouter/visualizer': 'npm:@uirouter/visualizer@4',
'@uirouter/angular': 'npm:@uirouter/angular/_bundles/ui-router-ng2',
'@uirouter/rx': 'npm:@uirouter/rx/_bundles/ui-router-rx',
'primeng': 'npm:primeng',
'primeng': 'npm:primeng/primeng.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
main: 'index.js',
defaultExtension: 'js'
},
"rxjs/operators": {
main: 'index.js',
defaultExtension: 'js'
}
}
});
</script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app>
loading...
</app>
</body>
</html>
import {Component, ElementRef, ViewChild} from '@angular/core';
import {UIRouter} from "@uirouter/angular";
import {Http, URLSearchParams} from "@angular/http";
import {DataTable} from 'primeng';
@Component({
template: `
Users
<p-dataTable #dt
[rows]="options.rows"
[lazy]="true"
[totalRecords]="options.totalRecords"
[rowsPerPageOptions]="options.rowsPerPageOptions"
[value]="options.data"
[paginator]="true"
(onRowSelect)="onRowSelect($event)"
(onPage)="onPage($event)"
selectionMode="single"
expandableRows="true">
<!--<p-column expander="true" styleClass="col-icon"></p-column>-->
<p-column *ngFor="let col of options.columns" [field]="col.field" [header]="col.header"></p-column>
<ng-template let-user pTemplate="rowexpansion">
<p-dataTable
[rows]="subridOptions.rows"
[lazy]="true"
[totalRecords]="subridOptions.totalRecords"
[rowsPerPageOptions]="subridOptions.rowsPerPageOptions"
[value]="subridOptions.data"
[paginator]="true"
selectionMode="single"
expandableRows="true">
<p-column *ngFor="let col of subridOptions.columns" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
</ng-template>
</p-dataTable>
`
})
export class UsersComponent {
@ViewChild('dt') dt:DataTable;
private options:Object;
private user:Object;
private subridOptions:Object;
constructor(private http:Http) {
this.options = {
data: [],
page: 1,
rows: 10,
totalRecords: 100,
columns: [
{field: "name", header: "name"}
],
rowsPerPageOptions: [10,20,30]
};
this.http.get("https://jsonplaceholder.typicode.com/users", {
}).subscribe(
(response) => {this.options.data = response.json(); this.options.totalRecords = 100}
);
this.subridOptions = {
data: [],
page: 1,
rows: 10,
totalRecords: 100,
columns: [
{field: "vin", header: "Vin"},
{field: "year", header: "Year"},
{field: "brand", header: "Brand"},
{field: "color", header: "Color"}
],
rowsPerPageOptions: [10,20,30]
};
}
onRowSelect(event) {
/*if(this.dt.isSelected(event.data)) {
this.dt.selection = null;
this.dt.selectionChange.emit(null);
this.dt.toggleRow(event.data,event.originalEvent);
this.user = null;
}
else {
alert(1);
this.user = event.data;
this.dt.expandedRows.splice(0, this.dt.expandedRows.length);
this.dt.toggleRow(event.data,event.originalEvent);
}*/
if(this.user) {
if(this.user.id == event.data.id) {
this.dt.selection = null;
this.dt.selectionChange.emit(null);
this.dt.toggleRow(event.data,event.originalEvent);
this.user = null;
} else {
this.user = event.data;
this.dt.expandedRows.splice(0, this.dt.expandedRows.length);
this.dt.toggleRow(event.data,event.originalEvent);
}
} else {
this.user = event.data;
this.dt.toggleRow(event.data,event.originalEvent);
}
this.subridOptions.data = [];
//loading subgrid data
if(this.user) {
if(this.user.id == 1) {
this.subridOptions.data = [{"vin": "a", "year": "a", "brand": "a", "color": "a"}];
}
}
console.log(this);
console.log(event);
}
onPage(event) {
//event.first: Index of first record in page
//event.rows: Number of rows on the page
var page = (event.first / event.rows);
console.log(page);
}
}
@Component({
selector: 'app',
template: `
<div>MAIN HEADER</div>
<div class="container">
<ui-view style="margin-left: auto;margin-right: auto;"></ui-view>
</div>
`,
})
export class App {
constructor(router:UIRouter) {
//fix https://github.com/angular-ui/ui-router/issues/3227
setTimeout(function() {
router.stateService.go('users');
}, 0);
}
}
import {NgModule, NgModuleFactoryLoader} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {App, UsersComponent} from './app'
import {UIView, UIRouterModule, provideUIRouter, UIRouter, Ng2StateDeclaration} from "@uirouter/angular";
import {DataTableModule} from 'primeng';
import {HttpModule} from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
let states:Ng2StateDeclaration[] = [
{ name: 'users', url: '/', component: UsersComponent }
];
@NgModule({
imports: [
BrowserModule,
UIRouterModule.forRoot({
states: states,
useHash: true,
otherwise: '/'
}),
HttpModule,
DataTableModule,
BrowserAnimationsModule
],
declarations: [App, UsersComponent],
bootstrap: [App],
states: states,
})
export class AppModule {
constructor() {
}
}
platformBrowserDynamic().bootstrapModule(AppModule);