show star next to primary degree plan

src/app/degree-planner/degree-planner.component.html

@@ -9,11 +9,21 @@
 			<mat-form-field>
 				<mat-select
 					placeholder="Degree Plans"
+					class="degree-plan-selector"
 					[value]="visibleRoadmapId$ | async"
 					[disableOptionCentering]="true"
 					(selectionChange)="handleDegreePlanChange($event)">
-					<mat-option *ngFor="let degreePlan of allDegreePlans$ | async" [value]="degreePlan.roadmapId">
-						{{ degreePlan.name }}
+
+					<!-- Render the name of the currently visible degree plan. -->
+					<mat-select-trigger *ngIf="(visibleDegreePlan$ | async) as degreePlan">
+						<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
+						<span class="plan-name">{{degreePlan.name}}</span>
+					</mat-select-trigger>
+
+					<!-- Show all degree plans in the dropdown list and ddd a star next to the user's primary plan. -->
+					<mat-option *ngFor="let degreePlan of (allDegreePlans$ | async)" [value]="degreePlan.roadmapId">
+						<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
+						<span class="plan-name">{{degreePlan.name}}</span>
 					</mat-option>
 				</mat-select>
 			</mat-form-field>

src/app/degree-planner/degree-planner.component.scss

@@ -15,6 +15,30 @@ mat-sidenav {
 	background-color: #F0F0F0;
 }
 
+.degree-plan-selector {
+  height: 27px;
+
+  mat-select-trigger {
+    height: 24px;
+    display: inline-block;
+    position: relative;
+    top: 1px;
+
+    .plan-name {
+      position: relative;
+      top: 1px;
+      display: inline-block;
+      vertical-align: top;
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+
+  .primary-star {
+    margin-right: 12px;
+  }
+}
+
 @media screen and (max-width: 600px) {
 	#menu-toggle-btn {
 		position: relative;

src/app/degree-planner/degree-planner.component.ts

@@ -18,6 +18,7 @@ import {
   getVisibleRoadmapId,
   firstActiveTermCode,
   getAllVisibleTermsByYear,
+  getVisibleDegreePlan,
 } from '@app/degree-planner/store/selectors';
 
 // Actions
@@ -34,6 +35,7 @@ export class DegreePlannerComponent implements OnInit {
   public coursesData$: any;
 
   public visibleRoadmapId$: Observable<number | undefined>;
+  public visibleDegreePlan$: Observable<DegreePlan | undefined>;
   public allDegreePlans$: Observable<DegreePlan[]>;
   public firstActiveTermCode$: Observable<string | undefined>;
   public termsByYear$: Observable<Year[]>;
@@ -47,6 +49,7 @@ export class DegreePlannerComponent implements OnInit {
 
   public ngOnInit() {
     this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
+    this.visibleDegreePlan$ = this.store.pipe(select(getVisibleDegreePlan));
     this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
     this.firstActiveTermCode$ = this.store.pipe(select(firstActiveTermCode));
     this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));