Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -28,5 +28,10 @@
                             <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
                                  Add locations
-                              </button>
+                                 </button>
+                            </td>
+                        </tr>
+                        <tr *ngFor ="let location of locations">
+                            <td>
+                                {{location.name}}
                             </td>
                         </tr>
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -3,5 +3,7 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { PlannerDto } from 'src/app/_models/dto/plannerDto';
+import { Location } from 'src/app/_models/location';
 import { Planner } from 'src/app/_models/planner';
+import { LocationService } from 'src/app/_services/location.service';
 import { PlannerService } from 'src/app/_services/planner.service';
 
@@ -18,14 +20,17 @@
   plannerDto: PlannerDto;
   id: number;
+  locations: Location[];
 
 
-  constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) { 
+  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
+    private locationService : LocationService) {
     this.planner = new Planner();
     this.planners = [];
     this.form = fb.group({
       title: fb.control('initial value', Validators.required)
-  });
+    });
     this.plannerDto = new PlannerDto();
     this.id = 1;
+    this.locations = [];
   }
 
@@ -34,22 +39,26 @@
 
     this.form = this.fb.group({
-        name: [''],
-        description: [''],
-        locationList: []
+      name: [''],
+      description: [''],
+      locationList: []
     });
 
     this.plannerService.getPlannerById(this.id)
-    .pipe()
-    .subscribe(x => this.form.patchValue(x));
+      .pipe()
+      .subscribe(x => this.form.patchValue(x));
+
+    this.locationService.getLocationsFroPlanner(this.id).subscribe(
+      data => {
+          this.locations = data;
+      }
+    );
+    }
+ 
+  onSubmit() {
+    this.updatePlanner();
+
   }
 
-
-  onSubmit(){
-    this.updatePlanner();
-      
-  }
-
-  onClickAddLocation()
-  {
+  onClickAddLocation() {
     this.router.navigate(['form']);
   }
@@ -57,14 +66,14 @@
   private updatePlanner() {
     this.plannerService.updatePlanner(this.id, this.form.value)
-        .pipe()
-        .subscribe({
-            next: () => {
-              this.router.navigate(['planners']);
-            },
-            error: error => {
-                console.log("error");
-            }
-        });
+      .pipe()
+      .subscribe({
+        next: () => {
+          this.router.navigate(['planners']);
+        },
+        error: error => {
+          console.log("error");
+        }
+      });
+  }
+
 }
-  
-}
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -22,5 +22,5 @@
 
 
-  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router,
+  constructor(private plannerService: PlannerService, private dialog: MatDialog, private router: Router,
     private fb : FormBuilder) { 
     this.planners = [];
@@ -49,7 +49,6 @@
     console.log(id);
         this.plannerService.getPlannerById(id).subscribe(
-            data => {
-              
-              this.router.navigate(['edit/planner/', id])
+            data => {          
+              this.router.navigate(['edit/planner/', id]);
             }
      );
