Angular 6 Primeng - How To Add A Checkbox With Distinct Values From One Column?

I have example Angular PrimeNG code for creating a Html Table:

Basic

Solution 1:

You have to use : <p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>

Here's an example:

<p-table [value]="cars" [(selection)]="selectedCars"><ng-templatepTemplate="header"><tr><thstyle="width: 35px"><p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox></th><th>Make</th><th>Model</th><th>Color</th></tr></ng-template><ng-templatepTemplate="body"let-car><tr><td><p-tableCheckbox [value]="car"></p-tableCheckbox></td><td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.color}}</td></tr></ng-template></p-table>

Take a look to the documentation: https://www.primefaces.org/primeng/#/table/selection

UPDATED ANSWER:

<divclass="ui-g"style="width:250px;margin-bottom:10px"><divclass="ui-g-12"><p-checkboxname="group1"value="New York"label="New York" [(ngModel)]="selectedCities"inputId="ny"></p-checkbox></div><divclass="ui-g-12"><p-checkboxname="group1"value="San Francisco"label="San Francisco" [(ngModel)]="selectedCities"inputId="sf"></p-checkbox></div><divclass="ui-g-12"><p-checkboxname="group1"value="Los Angeles"label="Los Angeles" [(ngModel)]="selectedCities"inputId="la"></p-checkbox></div></div>

ts

 selectedCities: string[] = [];

    selectedCategories: string[] = ['Technology', 'Sports'];

    checked: boolean = false;

You can always create the checkboxes with a *ngFor https://www.primefaces.org/primeng/#/checkbox