export class DataTableCrudDemo implements OnInit {
displayDialog: boolean;
car: Car = new PrimeCar();
selectedCar: Car;
newCar: boolean;
cars: Car[];
cols: Column[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.cols = [
{field: 'vin', header: 'Vin', sortable: true},
{field: 'brand', header: 'Brand', sortable: true},
{field: 'year', header: 'Year', sortable: true},
{field: 'color', header: 'Color', sortable: true}
];
}
showDialogToAdd() {
this.newCar = true;
this.car = new PrimeCar();
this.displayDialog = true;
}
save() {
if(this.newCar)
this.cars.push(this.car);
else
this.cars[this.findSelectedCarIndex()] = this.car;
this.car = null;
this.displayDialog = false;
}
delete() {
this.cars.splice(this.findSelectedCarIndex(), 1);
this.car = null;
this.displayDialog = false;
}
onRowSelect(event) {
this.newCar = false;
this.car = this.cloneCar(event.data);
this.displayDialog = true;
}
cloneCar(c: Car): Car {
let car = new PrimeCar();
for(let prop in c) {
car[prop] = c[prop];
}
return car;
}
findSelectedCarIndex(): number {
return this.cars.indexOf(this.selectedCar);
}
}
class PrimeCar implements Car {
constructor(public vin?, public year?, public brand?, public color?) {}
}
<p-dataTable [value]="cars" [columns]="cols" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="15" [responsive]="true">
<header>CRUD for Cars</header>
<footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()">Add</button></div></footer>
</p-dataTable>
<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="car">
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="vin">Vin</label></div>
<div class="ui-grid-col-8"><input pInputText id="vin" [(ngModel)]="car.vin" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="brand">Year</label></div>
<div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.year" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="brand">Brand</label></div>
<div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.brand" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="color">Color</label></div>
<div class="ui-grid-col-8"><input pInputText id="color" [(ngModel)]="car.color" /></div>
</div>
</div>
<footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="fa-close" (click)="delete()">Delete</button>
<button type="button" pButton icon="fa-check" (click)="save()">Save</button>
</div>
</footer>
</p-dialog>