<p class="mb-3"><em>{{ categoryLabel }}</em></p> <div class="row mb-1"> <div class="col pr-1"> <button (click)="selectAll()" [disabled]="isAllSelected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button> </div> <div class="col pl-1"> <button (click)="unselectAll()" [disabled]="isAllUnselected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button> </div> </div> <div class="selectbox p-0"> <div *ngFor="let attribute of getAttributeListSortedByDisplay()"> <div *ngIf="isSelected(attribute.id)"> <button class="btn btn-block text-left py-1 m-0 bg-theme-color rounded-0" (click)="toggleSelection(attribute.id)"> <i class="fas fa-fw fa-check"></i> {{ attribute.form_label }} </button> </div> <div *ngIf="!isSelected(attribute.id)"> <button class="btn btn-block text-left py-1 m-0 rounded-0" (click)="toggleSelection(attribute.id)"> <i class="far fa-fw fa-square text-secondary"></i> {{ attribute.form_label }} </button> </div> </div> </div>