💄 write sample locations as sub-lists

src/app/samples/sample-detail/sample-detail.component.html

@@ -55,9 +55,14 @@ <h2>id: {{ sample._id.$oid }}</h2>
           Type: {{ sample.type }}
         </mat-list-item>
 
-        <mat-list-item role="listitem" *ngIf="sample.locations">
-          Locations: {{ sample.locations | locationsList }}
-        </mat-list-item>
+        <ng-container *ngIf="sample.locations">
+          <mat-list-item>Locations: </mat-list-item>
+          <mat-list class="subitem">
+            <div *ngFor="let location of sample.locations | locationsList">
+              <mat-list-item>{{ location }}</mat-list-item>
+            </div>
+          </mat-list>
+        </ng-container>
 
         <mat-expansion-panel
             *ngIf="sample.metadata"

src/app/samples/sample-detail/sample-detail.component.scss

@@ -1,3 +1,7 @@
 .mat-expansion-panel-header-title {
   font-size: 16px;
 }
+
+.subitem {
+  margin-left: 30px;
+}

src/app/shared/locations-list.pipe.ts

@@ -7,11 +7,11 @@ import { Multipoint } from '../samples/samples.model';
 })
 export class LocationsListPipe implements PipeTransform {
 
-  transform(value: Multipoint): string {
-    let result = '';
+  transform(value: Multipoint): string[] {
+    let result: string[] = [];
 
     value.coordinates.forEach(position => {
-      result += `latitude: ${position[1]}, longitude: ${position[0]} `
+      result.push(`latitude: ${position[1]}, longitude: ${position[0]}`);
     });
 
     return result;