export class DataTableCMDemo implements OnInit {
msgs: Message[];
cars: Car[];
selectedCar: Car;
items: MenuItem[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.items = [
{label: 'View', icon: 'fa-search', command: (event) => this.viewCar(this.selectedCar)},
{label: 'Delete', icon: 'fa-close', command: (event) => this.deleteCar(this.selectedCar)}
];
}
viewCar(car: Car) {
this.msgs = [];
this.msgs.push({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
}
deleteCar(car: Car) {
let index = -1;
for(let i = 0; i < this.cars.length; i++) {
if(this.cars[i].vin == car.vin) {
index = i;
break;
}
}
this.cars.splice(index, 1);
this.msgs = [];
this.msgs.push({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
}
}
<p-growl [value]="msgs"></p-growl>
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" [contextMenu]="cm">
<header>Right Click on Rows for ContextMenu</header>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<p-contextMenu #cm [model]="items"></p-contextMenu>