export class DataTableCMDemo implements OnInit {
msgs: Message[];
cars: Car[];
selectedCar: Car;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
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>
<ul>
<li><a data-icon="fa-search" (click)="viewCar(selectedCar)">View</a></li>
<li><a data-icon="fa-close" (click)="deleteCar(selectedCar)">Delete</a></li>
</ul>
</p-contextMenu>