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-template pTemplate="header">
<tr>
<th style="width: 35px">
<p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
</th>
<th>Make</th>
<th>Model</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="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:
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="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
Post a Comment for "Angular 6 PrimeNG - How To Add A Checkbox With Distinct Values From One Column?"