profile.component.html 1.86 KB
<mat-card>
  <mat-toolbar color="primary">Operator profile</mat-toolbar>
  <mat-card-content>
    <form fxLayout="column">
      <div fxLayout="row wrap">
        <div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
          <mat-form-field fxFlex style="width: 30%">
            <input matInput placeholder="First name" value="alex" disabled>
          </mat-form-field>
          <mat-form-field fxFlex style="width: 30%">
            <input matInput placeholder="Last name" value="paul" disabled>
          </mat-form-field>
          <mat-form-field fxFlex style="width: 30%">
            <input matInput placeholder="User Name" value="alex123" disabled>
          </mat-form-field>
        </div>
      </div>
      <div fxLayout="row wrap">
        <div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
          <mat-form-field fxFlex style="width: 30%">
            <input matInput placeholder="Email address" value="alex@ymail.com" disabled>
          </mat-form-field>
          <mat-form-field>
            <mat-select placeholder="Role" [(value)]="selectedRole" disabled>
              <mat-option value="SUPERADMIN">Super Admin</mat-option>
              <mat-option value="ADMIN">Admin</mat-option>
              <mat-option value="MARKETING">Marketing</mat-option>
              <mat-option value="DEVELOPER">Developer</mat-option>
              <mat-option value="QA">QA</mat-option>
              <mat-option value="CS">CS</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <hr>
      <mat-card-actions>
        <button mat-raised-button color="primary" type="submit">Submit</button>
        <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
      </mat-card-actions>
    </form>
  </mat-card-content>
</mat-card>