job.component.html

<mat-list-item style="height: auto; width: auto">
  <div fxLayout="column" style="width: 100%">
    <div style="text-align: left"> {{ jobdata.name }} </div>
    <div *ngIf="jobdata.connectionState == 0" fxLayout="row" fxLayoutAlign="space-between">
      <div fxFlex="10%"> {{ jobdata.state }}</div>
      <div fxFlex="10%"> {{ jobdata.jobid }}</div>
      <div *ngIf="jobdata.batch_host != 'localhost'" fxFlex="10%"> {{ jobdata.batch_host }}</div>
      <div fxFlex="20%" fxLayout="column">
        <div> {{ resources }} </div>
        <div> {{ timeremaining }} </div>
      </div>
      <div fxFlex></div>
      <div fxFlex="15%" fxLayout="row">
        <div fxFlex *ngIf="!nocancel"> <button mat-button (click)="onCancel()" > Cancel </button> </div>
        <div *ngFor="let action of jobdata.app.actions">
            <div fxFlex *ngIf="action.states === undefined || action.states === null || action.states.indexOf(jobdata.state) != -1">
                <button mat-button (click)="onConnect(action)">{{ action.name }}</button>
            </div>
        </div>
      </div>
    </div>

    <div fxLayout="row" *ngIf="jobdata.connectionState == 1">
      <div fxFlex="20%"> Getting app parameters </div>
      <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=30></mat-progress-bar> </div>
    </div>
     
    <div fxLayout="row" *ngIf="jobdata.connectionState == 2">
        <div fxFlex="20%"> Creating secure tunnels </div>
        <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=60></mat-progress-bar> </div>
    </div>
     
    <div fxLayout="row" *ngIf="jobdata.connectionState == 3">
      <div fxFlex="20%"> Determining correct URL </div>
      <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=90></mat-progress-bar> </div>
    </div>
  </div>
</mat-list-item>

<!--<mat-list-item>
    <div fxLayout="column" fxLayoutAlign="space-around none" style="width: 100%; background-color: red">
        <div fxLayout="row" style="background-color: green">
            <div>
                {{ jobdata.name }}
            </div>
            <div fxFlex>
            </div>
        </div>
        <div *ngIf="jobdata.connectionState == 0" fxLayout="row" style="background-color: blue">
            <div>
               {{ jobdata.state }}
            </div>
            <div></div>
            <div fxLayout="column">
              <div> {{ resources }} </div>
              <div> {{ timeremaining }} </div>
            </div>
        </div>
    </div>
</mat-list-item>-->