only render container if term data supports it

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

@@ -30,21 +30,27 @@
 							</mat-panel-title>
 						</mat-expansion-panel-header>
 						<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
-							<cse-term-container
-								id="term-1{{term[0].year}}2"
-								fxFlex="33%"
-								[termCode]="term[0].termCode"
-								[courses]="term[0].courses"></cse-term-container>
-							<cse-term-container
-								id="term-1{{term[0].year}}4"
-								fxFlex="33%"
-								[termCode]="term[1].termCode"
-								[courses]="term[1].courses"></cse-term-container>
-							<cse-term-container
-								id="term-1{{term[0].year}}6"
-								fxFlex="33%"
-								[termCode]="term[2].termCode"
-								[courses]="term[2].courses"></cse-term-container>
+							<ng-container *ngIf="term.length >= 1">
+								<cse-term-container
+									id="term-1{{term[0].year}}2"
+									fxFlex="33%"
+									[termCode]="term[0].termCode"
+									[courses]="term[0].courses"></cse-term-container>
+							</ng-container>
+							<ng-container *ngIf="term.length >= 2">
+								<cse-term-container
+									id="term-1{{term[0].year}}4"
+									fxFlex="33%"
+									[termCode]="term[1].termCode"
+									[courses]="term[1].courses"></cse-term-container>
+							</ng-container>
+							<ng-container *ngIf="term.length >= 3">
+								<cse-term-container
+									id="term-1{{term[0].year}}6"
+									fxFlex="33%"
+									[termCode]="term[2].termCode"
+									[courses]="term[2].courses"></cse-term-container>
+							</ng-container>
 						</div>
 					</mat-expansion-panel>
 				</ng-container>