<div class="container">
    <p>Enter the name of a new observation set and select samples. Then click the Add button.
    </p>

    <form class="mat-dialog-content" (ngSubmit)="submit" [formGroup]="observationForm">

        <div class="form">

            <mat-form-field class="form-control" color="accent">
                <mat-label>Enter observation set name</mat-label>
                <input matInput formControlName=observationSetName name=observationSetName>
            </mat-form-field>

            <mat-form-field 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>
            
            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 class="button-panel">
            <button mat-button [mat-dialog-close]="1" mat-raised-button color="accent"
               [type]="submit" [disabled]="!observationForm.valid" (click)="confirmAdd()">Add</button>
            <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
        </div>
    </form>
</div>

./add-observation-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;
}