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">
            {{ 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>