<div class="container">
    <p *ngIf="isObservationSet; else featureSetText">
        Update the name of the observation set, its color and sample list. Then click the Save button.
    </p>

    <ng-template #featureSetText>
        <p>
            Update the name of the feature set. Then click the Save button.
        </p>
    </ng-template>

    <form class="mat-dialog-content" (ngSubmit)="submit" [formGroup]="observationForm">
        <div class="form">
            <mat-form-field class="form-control" color="accent">
                <mat-label>Enter {{ customSetType | lowercase}} name</mat-label>
                <input matInput formControlName=observationSetName name=observationSetName>
            </mat-form-field>

            <mat-form-field *ngIf="isObservationSet" class="form-control" color="accent">
                <mat-label>Select your color for the observation set:</mat-label>
                <input type="color" class="color-picker-input" matInput formControlName=observationSetColor
                    name=observationSetColor>
            </mat-form-field>

            <div *ngIf="isObservationSet">
                Select samples:
                <div class="mat-elevation-z8">
                    <div class="filter-panel">
                        <mat-form-field class="form-control">
                            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                        </mat-form-field>
                    </div>

                    <table mat-table [dataSource]="allObservationSetsDS">

                        <ng-container matColumnDef="select">
                            <th mat-header-cell *matHeaderCellDef>
                                <mat-checkbox (change)="$event ? masterToggle() : null"
                                    [checked]="selection.hasValue() && isAllSelected()"
                                    [indeterminate]="selection.hasValue() && !isAllSelected()">
                                </mat-checkbox>
                            </th>
                            <td mat-cell *matCellDef="let row">
                                <mat-checkbox (click)="$event.stopPropagation()"
                                    (change)="$event ? selection.toggle(row) : null"
                                    [checked]="selection.isSelected(row)">
                                </mat-checkbox>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef> Name </th>
                            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                        </ng-container>

                        <ng-container
                            *ngFor="let attrCol of observationSetsDisplayedColumnsAttributesOnly; let colIndex = index"
                            matColumnDef="{{attrCol}}">
                            <th mat-header-cell *matHeaderCellDef>{{ attrCol }}</th>
                            <td mat-cell *matCellDef="let element">
                                {{ element.attributes[attrCol] ? element.attributes[attrCol].value : '' }}</td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="observationSetsDisplayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: observationSetsDisplayedColumns;"
                            (click)="selection.toggle(row)">
                        </tr>
                    </table>
                    <mat-paginator [pageSizeOptions]="[5, 10, 25]">
                    </mat-paginator>
                </div>
            </div>

            <div *ngIf="!isObservationSet">
                Selected features:
                <ul> 
                    <li *ngFor="let elem of data.selectedElements">{{ elem.id }}</li>
                </ul>
            </div>            

        </div>
        <div class="button-panel">
            <button mat-button [mat-dialog-close]="1" mat-raised-button color="accent" [type]="submit"
                [disabled]="!observationForm.valid" (click)="confirmEdit()">Save</button>
            <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
        </div>
    </form>
</div>

./edit-feature-set-dialog.component.scss

.container {
  font-size: 14px;
}

.mat-dialog-content {
  overflow-y: auto;
}

.form-control {
  width: 100%;
}

.filter-panel {
  padding: 0 10px;
}

table {
  width: 100%;
}

.color-picker-input {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}

.button-panel {
  margin-top: 25px;
}