<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://npmcdn.com/primeui/themes/delta/theme.css" />
<link rel="stylesheet" href="https://npmcdn.com/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="https://npmcdn.com/font-awesome/css/font-awesome.min.css" />
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
.ui-dropdown-item.ui-corner-all.disabled {
opacity: 0.3;
cursor: not-allowed;
}
### Angular Starter Plunker - Typescript
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'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/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@4.3.1/bundles/platform-browser-animations.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/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
'primeng': 'npm:primeng'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import { Component, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { DatePipe } from '@angular/common';
import { DropdownModule, Dropdown, SelectItem, DataTableModule } from 'primeng/primeng';
@Component({
selector: 'my-app',
template: `
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="cars"
[rows]="10"
[paginator]="true"
[alwaysShowPaginator]="false"
[globalFilter]="gb"
sortField="startDate"
[sortOrder]="-1"
#dt>
<p-header>List of Cars</p-header>
<p-column field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="year">
<ng-template pTemplate="header">
<button type="button">Year</button>
</ng-template>
</p-column>
<p-column field="brand" header="Brand" [filter]="true" filterMatchMode="equals" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="brands"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,col.field,col.filterMatchMode)"
styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color"></p-column>
<p-column field="startDate" header="Date" [style]="{'overflow':'visible'}" [sortable]="true">
<ng-template let-col let-car="rowData" let-ri="rowIndex" pTemplate="body">
<span>{{car[col.field] | date : 'dd-MM-y'}}</span>
</ng-template>
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="filters"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value, 'dateFilter', 'in')"
styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
<p-column field="dateFilter" header="Filter" hidden="true"></p-column>
</p-dataTable>
`
})
export class App implements OnInit {
cars = [
{"vin":"a1653d4d","brand":"VW","year":1998,"color":"White","price":10000},
{"vin":"ddeb9b10","brand":"Mercedes","year":1985,"color":"Green","price":25000},
{"vin":"d8ebe413","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
{"vin":"aab227b7","brand":"Audi","year":1970,"color":"Black","price":12000},
{"vin":"631f7412","brand":"Volvo","year":1992,"color":"Red","price":15500},
{"vin":"7d2d22b0","brand":"VW","year":1993,"color":"Maroon","price":40000},
{"vin":"50e900ca","brand":"Fiat","year":1964,"color":"Blue","price":25000},
{"vin":"4bbcd603","brand":"Renault","year":1983,"color":"Maroon","price":22000},
{"vin":"70214c7e","brand":"Renault","year":1961,"color":"Black","price":19000},
{"vin":"ec229a92","brand":"Audi","year":1984,"color":"Brown","price":36000},
{"vin":"1083ee40","brand":"VW","year":1984,"color":"Silver","price":215000},
{"vin":"6e0da3ab","brand":"Volvo","year":1987,"color":"Silver","price":32000},
{"vin":"5aee636b","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
{"vin":"7cc43997","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
{"vin":"88ec9f66","brand":"Honda","year":1989,"color":"Maroon","price":36000},
{"vin":"f5a4a5f5","brand":"BMW","year":1986,"color":"Blue","price":28000},
{"vin":"15b9a5c9","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
{"vin":"f7e18d01","brand":"Mercedes","year":1991,"color":"White","price":25000},
{"vin":"cec593d7","brand":"VW","year":1992,"color":"Blue","price":36000},
{"vin":"d5bac4f0","brand":"Renault","year":2001,"color":"Blue","price":25000},
{"vin":"56b527c8","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
{"vin":"1ac011ff","brand":"Audi","year":1966,"color":"Maroon","price":45000},
{"vin":"fc074185","brand":"BMW","year":1962,"color":"Blue","price":54000},
{"vin":"606ba663","brand":"Honda","year":1982,"color":"Blue","price":22000},
{"vin":"d05060b8","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
{"vin":"46e4bbe8","brand":"Mercedes","year":1986,"color":"White","price":18000},
{"vin":"c29da0d7","brand":"BMW","year":1983,"color":"Brown","price":32000},
{"vin":"24622f70","brand":"VW","year":1973,"color":"Maroon","price":36000},
{"vin":"7f573d2c","brand":"Mercedes","year":1991,"color":"Red","price":21000},
{"vin":"b69e6f5c","brand":"Jaguar","year":1993,"color":"Yellow","price":16000},
{"vin":"ead9bf1d","brand":"Fiat","year":1968,"color":"Maroon","price":43000},
{"vin":"bc58113e","brand":"Renault","year":1981,"color":"Silver","price":36000},
{"vin":"2989d5b1","brand":"Honda","year":2006,"color":"Blue","price":240000},
{"vin":"c243e3a0","brand":"Fiat","year":1990,"color":"Maroon","price":15000},
{"vin":"e3d3ebf3","brand":"Audi","year":1996,"color":"White","price":28000},
{"vin":"45337e7a","brand":"Mercedes","year":1982,"color":"Blue","price":14000},
{"vin":"36e9cf7e","brand":"Fiat","year":2000,"color":"Orange","price":26000},
{"vin":"036bf135","brand":"Mercedes","year":1973,"color":"Black","price":22000},
{"vin":"ad612e9f","brand":"Mercedes","year":1975,"color":"Red","price":45000},
{"vin":"97c6e1e9","brand":"Volvo","year":1967,"color":"Green","price":42000},
{"vin":"ae962274","brand":"Volvo","year":1982,"color":"Red","price":36000},
{"vin":"81f8972a","brand":"BMW","year":2007,"color":"Black","price":56000},
{"vin":"f8506743","brand":"Audi","year":1975,"color":"Blue","price":42000},
{"vin":"596859d1","brand":"Fiat","year":2002,"color":"Green","price":48000},
{"vin":"d83c1d9a","brand":"Volvo","year":1972,"color":"Black","price":29000},
{"vin":"32f41550","brand":"Mercedes","year":1978,"color":"Brown","price":17000},
{"vin":"c28cd2e4","brand":"Volvo","year":1982,"color":"Silver","price":24000},
{"vin":"80890dcc","brand":"Audi","year":1962,"color":"White","price":36000},
{"vin":"4bf1aeb5","brand":"VW","year":2000,"color":"Silver","price":24000},
{"vin":"45ca4786","brand":"BMW","year":1995,"color":"Maroon","price":50000}
];
brands: SelectItem[];
filters;
constructor(private datePipe: DatePipe) {}
ngOnInit() {
this.brands = [];
this.brands.push({label: 'All Brands', value: null});
this.brands.push({label: 'Audi', value: 'Audi'});
this.brands.push({label: 'BMW', value: 'BMW'});
this.brands.push({label: 'Fiat', value: 'Fiat'});
this.brands.push({label: 'Honda', value: 'Honda'});
this.brands.push({label: 'Jaguar', value: 'Jaguar'});
this.brands.push({label: 'Mercedes', value: 'Mercedes'});
this.brands.push({label: 'Renault', value: 'Renault'});
this.brands.push({label: 'VW', value: 'VW'});
this.brands.push({label: 'Volvo', value: 'Volvo'});
this.cars = this.cars.map(car => {
let randomDate = new Date(+(new Date()) - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 30);
car.startDate = randomDate;
car.dateFilter = this.datePipe.transform(randomDate, 'yyyy-MM-dd')
return car;
});
const currTime = new Date().getTime();
this.filters = [];
this.filters.push({label: 'All days', value: null});
this.filters.push({label: 'Last 1 day', value: [this.createFilterDate(currTime)]});
this.filters.push({label: 'Last 7 days', value: Array(...new Array(7)).map((item, index) => this.createFilterDate(currTime - index * 1000 * 60 * 60 * 24))});
this.filters.push({label: 'Last 20 days', value: Array(...new Array(20)).map((item, index) => this.createFilterDate(currTime - index * 1000 * 60 * 60 * 24))});
}
createFilterDate(time) {
return this.datePipe.transform(new Date(time), 'yyyy-MM-dd');
}
);
}
@NgModule({
imports: [ BrowserModule, DropdownModule, DataTableModule, FormsModule, BrowserAnimationsModule ],
declarations: [ App ],
providers: [ DatePipe ],
bootstrap: [ App ]
})
export class AppModule {}