Fix undefined planId in

src/app/core/header/header.component.html

@@ -78,7 +78,7 @@
 
 <mat-menu #mobileActionMenu="matMenu">
   <button mat-menu-item (click)="printPlan()">Print degree plan</button>
-  <button mat-menu-item (click)="downloadPdf()">Download PDF</button>
+  <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ activeRoadmapId$ | async }}">Download PDF</a>
   <button mat-menu-item (click)="addPlan()">Add degree plan</button>
   <button mat-menu-item (click)="addYear()">Add academic year</button>
 </mat-menu>

src/app/core/header/header.component.ts

 import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { DegreePlannerState } from '@app/degree-planner/store/state';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+import * as selectors from '@app/degree-planner/store/selectors';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
 import { CreatePlan } from '@app/degree-planner/store/actions/plan.actions';
 import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAcademicYear.actions';
+import { GlobalState } from '../state';
 
 @Component({
   selector: 'cse-header',
@@ -12,21 +15,23 @@ import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAca
   styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent {
-  public planId: number;
+  public activeRoadmapId$: Observable<number>;
   constructor(
-    private store: Store<DegreePlannerState>,
+    private store: Store<GlobalState>,
     private dialog: MatDialog,
     private snackBar: MatSnackBar,
-  ) {}
+  ) {
+    this.activeRoadmapId$ = this.store.pipe(
+      select(selectors.selectVisibleDegreePlan),
+      filter(isntUndefined),
+      map(plan => plan.roadmapId),
+    );
+  }
 
   public printPlan() {
     window.print();
   }
 
-  public downloadPdf() {
-    window.open('/api/degreeplanpdf?roadmapId=' + this.planId, '_blank');
-  }
-
   public addPlan() {
     this.dialog
       .open(PromptDialogComponent, {
@@ -51,3 +56,7 @@ export class HeaderComponent {
     this.snackBar.open('New academic year has been created');
   }
 }
+
+const isntUndefined = <T>(anything: T | undefined): anything is T => {
+  return anything !== undefined;
+};

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

@@ -112,9 +112,7 @@
             <button mat-menu-item (click)="onPrintPlanClick()">
               Print plan
             </button>
-            <button mat-menu-item (click)="downloadPdf()">
-              Download PDF
-            </button>
+            <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ degreePlan.roadmapId }}">Download PDF</a>
             <button
               mat-menu-item
               (click)="onDeletePlanClick(degreePlan)"

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

@@ -53,7 +53,6 @@ export class DegreePlannerComponent implements OnInit, OnDestroy {
   public isLoadingPlan$: Observable<boolean>;
   public activeTermSubscription: Subscription;
   public firstActiveTerm: TermCode;
-  public planId: number;
 
   constructor(
     private store: Store<GlobalState>,
@@ -100,10 +99,6 @@ export class DegreePlannerComponent implements OnInit, OnDestroy {
     this.activeTermSubscription.unsubscribe();
   }
 
-  public downloadPdf() {
-    window.open('/api/degreeplanpdf?roadmapId=' + this.planId, '_blank');
-  }
-
   public handleAcademicYearToggle(year: Year): void {
     // this.store.dispatch(
     // new ToggleAcademicYear({ year: year.twoDigitYearCode.toString() }),

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html

@@ -73,17 +73,17 @@
           matTooltipPosition="left">print</i>
         Print
       </button>
-      <button mat-menu-item class="sidenav-link-btn" (click)="downloadPdf()">
-          <svg
+      <a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}">
+        <svg
           alt="Download PDF icon"
           matTooltip="Download PDF"
           matTooltipPosition="left"
-          style="width:24px;height:24px;position:relative;top:7px;"
+          style="width:24px;height:24px;"
           viewBox="0 0 24 24">
           <path fill="#0479a8" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
         </svg>
         Download PDF
-      </button>
+      </a>
       <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
         <i
           class="material-icons"

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts

@@ -53,10 +53,6 @@ export class SidenavMenuItemComponent implements OnDestroy {
     window.print();
   }
 
-  public downloadPdf() {
-    window.open('/api/degreeplanpdf?roadmapId=' + this.planId, '_blank');
-  }
-
   public onCreatePlanClick() {
     this.dialog
       .open(PromptDialogComponent, {