course-item.component.html

<div class="course-item {{ disabled ? 'disabled' : '' }}">
  <div fxLayout="row" fxLayoutAlign="space-between start">
    <div
      fxLayout="column"
      fxLayoutAlign="space-between start"
      fxFlex="80"
      (click)="openCourseDetailsDialog(course)"
    >
      <div fxLayout="row" fxLayoutAlign="start center">
        <div class="icon-number-wrapper">
          <p class="course-number" [ngClass]="{ 'strikethrough': isStruckthrough }">
            {{ course.subject }} {{ course.catalogNumber }}
          </p>
          <span [ngSwitch]="status">
            <i
              *ngSwitchCase="'Enrolled'"
              class="material-icons in-progress-icon"
              matTooltip="Course in progress"
              matTooltipPosition="above"
              >check_circle</i
            >
            <i
              *ngSwitchCase="'Waitlisted'"
              class="material-icons problem-icon"
              matTooltip="Course is waitlisted"
              matTooltipPosition="above"
              >report_problem</i
            >
            <i
              *ngSwitchCase="'Incomplete'"
              class="material-icons error-icon"
              matTooltip="Course is incomplete"
              matTooltipPosition="above"
              >error</i
            >
          </span>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center">
        <p class="course-title">{{ course.title }}</p>
      </div>
    </div>

    <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
      <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
        <mat-icon
          [matMenuTriggerFor]="courseMenu"
          (menuOpened)="onMenuOpen()"
          aria-label="Course menu"
          matTooltip="Course Menu"
          matTooltipPosition="right"
          class="material-icons"
          >more_horiz</mat-icon
        >
        <mat-menu #courseMenu="matMenu" class="course-item-menu">
          <button mat-menu-item (click)="openCourseDetailsDialog(course)">
            Course Details
          </button>
          <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">
            Move
          </button>
          <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
            <button
              mat-menu-item
              *ngFor="let term of (droppableTermCodes$ | async)"
              (click)="onMove(term)"
            >
              {{ term | getTermDescription }}
            </button>
          </mat-menu>
          <button
            mat-menu-item
            *ngIf="type !== 'saved'"
            (click)="onSaveForLater()"
          >
            Save for later
          </button>
          <button mat-menu-item *ngIf="type !== 'search'" (click)="onRemove()">
            Remove
          </button>
        </mat-menu>
      </div>
      <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
        <p>{{ course.grade || '&nbsp;' }}</p>
      </div>
      <div fxLayout="row" fxLayoutAlign="end center">
        <p class="course-credits">
          {{ course.credits ? course.credits : course.creditRange }} Cr
        </p>
      </div>
    </div>
  </div>
</div>