settings.component.html

    
<mat-toolbar color="primary">
      <mat-toolbar-row>
        <button mat-icon-button (click)=idSideNav.toggle()><mat-icon>menu</mat-icon></button>

        <span>Strudel v2.0</span>
        <span class="fill-horizontal-space"></span>
        </mat-toolbar-row>
    </mat-toolbar>

<div fxLayout="row" style="width: 100%">
    <div fxFlex></div>
    <div gdAreas = "header header | apiselect apiselect | themeselect themeselect | loadconfig resetconfig | done done">
        <div gdArea="header"><h2 style="width: 100%">Settings</h2></div>
        <div gdArea="apiselect">
            <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
            <mat-form-field>
                <mat-label>API Server</mat-label>
                <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
                    <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
                        {{ apis.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            </div>
        </div>
        <div gdArea="themeselect">
            <mat-form-field >
                <mat-label>Theme</mat-label>
                <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
                    <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
                        {{ opttheme.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div gdArea="loadconfig"> 
            <button type="button" mat-button (click)="fileInput.click()">Load Config</button>
            <input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
        </div>
        <div gdArea="resetconfig">
            <button mat-button (click)=resetConfig()>Reset Config</button>
        </div>
        <div gdArea="done"><button mat-flat-button color=primary routerLink="/launch" style="width: 100%">Done</button></div>
    </div>
    <div fxFlex></div>
</div>