generator-search.component.html

<div class="container">
  <div class="row justify-content-center">
    <h4 class="text-center mb-3">Your Generators</h4>
  </div>
  <div class="row justify-content-center">
    <mat-spinner *ngIf="loading$"></mat-spinner>
  </div>
  <div style="display: flex; flex-wrap: wrap; margin: 6em 2em; justify-content: space-evenly">

      <mat-card mat-ripple class="generator-card" *ngFor="let generator of generators$" (click)="goToGenerator(generator)">
        <mat-card-header>
          <mat-card-title>{{ generator.gen_name }}</mat-card-title>
          <mat-card-subtitle>{{ generator.state.state }}</mat-card-subtitle>
        </mat-card-header>
        <mat-list *ngIf="generator.state.online">
          <mat-list-item>
            <mat-icon matListIcon>error</mat-icon>
            <p matLine>
              <span> Active Faults: {{ generator.state.fault_count }} </span>
            </p>
          </mat-list-item>
          <mat-list-item>
            <mat-icon matListIcon>settings_ethernet</mat-icon>
            <p matLine>
              <span> IP Address: {{ generator.state.ip }} </span>
            </p>
          </mat-list-item>
        </mat-list>
      </mat-card>
  </div>
</div>