Use ngFor to display courseDetails elements

src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.html

@@ -23,23 +23,27 @@
 		<p>{{ courseDetails.description }}</p>
 		<p *ngIf="courseDetails.advisoryPrerequisites && courseDetails.advisoryPrerequisites.length > 0"><span class="semi-bold">Requisites:</span>{{ courseDetails.advisoryPrerequisites }}</p>
 		
-		<ul>
+		<ul class="courseDetails-list">
 			<li *ngIf="courseDetails.creditRange"><span class="semi-bold">Credits:</span> {{ courseDetails.creditRange }}</li>
 			<li *ngIf="courseDetails.levels && courseDetails.levels.length > 0"><span class="semi-bold">Level:</span>
-				{{ mapDescriptions(courseDetails.levels) }}
+				<span *ngFor="let levels of courseDetails.levels">
+					<span class="list-comma">{{ levels.description }}</span>
+				</span>
 			</li>
-			<li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth:</span> 
-				{{ mapDescriptions(courseDetails.breadths) }}
+			<li *ngIf="courseDetails.breadths && courseDetails.breadths.length > 0"><span class="semi-bold">Breadth:</span>
+				<span *ngFor="let breadths of courseDetails.breadths">
+					<span class="list-comma">{{ breadths.description }}</span>
+				</span>
 			</li>
 			<li *ngIf="courseDetails.lettersAndScienceCredits"><span class="semi-bold">L&amp;S Credit Type:</span>
 				{{ courseDetails.lettersAndScienceCredits.description }}
 			</li>
 		</ul>
 
-		<ul>
+		<ul class="courseDetails-list">
 			<li *ngIf="courseDetails.lastTaught"><span class="semi-bold">Last Taught:</span> {{ courseDetails.lastTaught | getTermDescription }}</li>
 			<li *ngIf="(courseDetails.gradCourseWork || courseDetails.workplaceExperience || courseDetails.foreignLanguage)" ><span class="semi-bold">Course Options:</span>
-				<ul class="course-options-list">
+				<ul class="courseDetails-nested-list">
 					<li>
 						<span *ngIf="courseDetails.gradCourseWork">50% Graduate Coursework Requirement</span>
 						<span *ngIf="courseDetails.workplaceExperience">{{ courseDetails.workplaceExperience.description }}</span>

src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.scss

 @import 'assets/material-theme.scss';
 
 #course-details-content {
-    ul {
+    .courseDetails-list {
         margin-bottom: 20px;
         list-style: none;
         padding-inline-start: 0px;
     }
-    .course-options-list {
+    .courseDetails-nested-list {
         list-style: circle;
         -webkit-padding-start: 1.2em;
         padding-inline-start: 1.2em;

src/app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component.ts

@@ -16,10 +16,6 @@ export class CourseDetailsDialogComponent implements OnInit {
 		this.courseDetails = data.courseDetails;
 	}
 
-	mapDescriptions(objects) {
-		return objects.map(object => object.description);
-	}
-
 	ngOnInit() {
 	}
 }

src/assets/sass/general.scss

@@ -94,6 +94,14 @@ body {
 	padding: 20px 10px;
 }
 
+.list-comma::before {
+    content: ', ';
+}
+
+.list-comma:first-child::before {
+    content: '';
+}
+
 /*
 
 	Note: The follow styles need to be in the global styles file