settings.component.html

<ngx-breadcrumbs title="Overview" [crumbs]="crumbs"></ngx-breadcrumbs>

<form fxLayout="row" [formGroup]="settingsForm">
  <mat-card class="scrolling" fxFlex="60">
    <mat-card-header>
      <mat-card-title>Preferences</mat-card-title>
    </mat-card-header>

    <mat-card-content>
      <div class="mat-table">
        <div class="mat-header-row">
          <div class="mat-header-cell" fxFlex="30">Setting</div>
          <div class="mat-header-cell" fxFlex="70">Options</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell" fxFlex="30">Language</div>
          <div class="mat-cell" fxFlex="30">
            <mat-radio-group formControlName="selectedLanguage">
              <mat-radio-button class="add-padding-right" *ngFor="let language of languages" [value]="language">
                {{ language }}
              </mat-radio-button>
            </mat-radio-group>
          </div>
        </div>
        <div class="mat-row">
          <div class="mat-cell" fxFlex="30">Theme</div>
          <div class="mat-cell" fxFlex="70">
            <mat-radio-group formControlName="selectedTheme">
              <mat-radio-button class="add-padding-right" *ngFor="let theme of themes" [value]="theme">
                {{ theme }}
              </mat-radio-button>
            </mat-radio-group>
          </div>
        </div>
        <div class="mat-row">
          <div class="mat-cell" fxFlex="30">Push Notifications</div>
          <div class="mat-cell" fxFlex="70">
            <mat-slide-toggle
              aria-label="enableNotifications"
              class="add-padding-right"
              formControlName="enableNotifications"
            >
            </mat-slide-toggle>
          </div>
        </div>
      </div>
    </mat-card-content>

    <mat-card-actions></mat-card-actions>
  </mat-card>
</form>