I currently have a table that includes columns for first name, last name, place of birth, date of birth, and three additional fields. Positioned above the table is a button that triggers a modal window containing checkboxes representing each column.
Below is the code snippet for these checkboxes:
<div *ngFor="let column of columns">
<md-checkbox id="{{column.name}}"
[checked]="checked"
[(ngModel)]="setColumn"
(click)="showColumn($event, column.name)">{{ column.name }}</md-checkbox>
</div>
The goal is to only display the columns for first name and last name when their respective checkboxes are selected before clicking the save button.
Can anyone provide guidance on accomplishing this task?
EDIT: The following is the code responsible for rendering the table:
<div class="table">
<div class="row">
<div class="col">
<label>
<a (click)="sortColumn('firstName')">
First Name<span>
<i *ngIf="order==1" class="fa fa-caret-down"></i>
<i *ngIf="order==(-1)" class="fa fa-caret-up"></i>
</span>
</a>
</label>
</div>
<div class="col">
<label>
<a (click)="sortColumn('lastName')">
Last Name<span>
<i *ngIf="order==1" class="fa fa-caret-down"></i>
<i *ngIf="order==(-1)" class="fa fa-caret-up"></i>
</span>
</a>
</label>
</div>
<div class="col">
<label>
<a (click)="sortColumn('placeOfBirth')">
Place of Birth<span>
<i *ngIf="order==1" class="fa fa-caret-down"></i>
<i *ngIf="order==(-1)" class="fa fa-caret-up"></i>
</span>
</a>
</label>
</div>
<div class="col">
<label>
<a (click)="sortColumn('birthdate')">
BirthDate<span>
<i *ngIf="order==1" class="fa fa-caret-down"></i>
<i *ngIf="order==(-1)" class="fa fa-caret-up"></i>
</span>
</a>
</label>
</div>
</div>
<div class="row" *ngFor="let user of users | sortingTable:path:order | paginate: { itemsPerPage: 45, currentPage: p}">
<div class="col">
<label>{{ user.firstName }}</label>
</div>
<div class="col">
<label>{{ user.lastName }}</label>
</div>
<div class="col">
<label>{{ user.placeOfBirth }}</label>
</div>
<div class="col">
<label>{{ user.birthdate }}</label>
</div>
</div>
</div>