<ng-container *ngIf="pref.type === 'string'">
  <div class="row">
    <div class="y-center col-md-6 col-12">
      <h3 mat-line>{{ name }}</h3>
    </div>
    <div class="y-center col-md-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <input
          matInput
          [value]="pref.value"
          (change)="stringUpdateWrapper($event)"
          autocorrect="off"
          autocapitalize="none"
        />
      </mat-form-field>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="pref.type === 'number'">
  <div class="row">
    <div class="y-center col-md-6 col-12">
      <h3 mat-line>{{ name }}</h3>
    </div>
    <div class="y-center col-md-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <input
          matInput
          type="number"
          [value]="pref.value"
          (change)="numberUpdateWrapper($event)"
        />
      </mat-form-field>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="pref.type === 'boolean'">
  <div class="row">
    <div class="y-center col-md-6 col-12">
      <h3 mat-line>{{ name }}</h3>
    </div>
    <div class="y-center col-md-6 col-12">
      <mat-slide-toggle
        class="col-md-6 col-12"
        [checked]="valBool"
        (change)="update($event.checked)"
      ></mat-slide-toggle>
    </div>
  </div>
</ng-container>
