listing.component.html

  <div class="heading"><div>Active events</div></div>

<div class="eventsList list">
  <div *ngFor="let event of events">
    <mat-card class="event" [class.mat-elevation-z7]="true">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{event.eventName}} <span class="badge badge-secondary tag" *ngIf="event.totalSeats*0.2>=event.remainingSeats">Fast filling</span> </mat-card-title>
        <mat-card-subtitle style="margin-bottom: 2rem; margin-top: -1rem;">{{event.remainingSeats}}/{{event.totalSeats}}
          seats available</mat-card-subtitle>
      </mat-card-header>
      <div class="eventImage">
        <img mat-card-image src="../../assets/images/logo.jpg" style="max-width: 10rem" alt="Photo of a Shiba Inu">
      </div>
      <mat-card-actions class="controls">
        <button mat-button color="primary">View Details</button>
        <button mat-button color="primary" *ngIf="event.isRegistrationAllowed">Register</button>
        <button mat-button disabled *ngIf="!event.isRegistrationAllowed">Closed</button>

      </mat-card-actions>
    </mat-card>
  </div>
</div>