CODEWITHSUNDEEP
javascriptangular
Nosail
Nosail

Reputation: 471

Back button using routerlink not linking to the desired page

i have a back button in the html of the EditListingComponent that i wish to connect to the listing component. the following works if i connect to the listings component Back

however, when i wish to go back to the particular listing with the id ($key), it does not work... Back

the foll are the routes:

const appRoutes: Routes = [
  {path:'', component:HomeComponent},
  {path: 'listings', component:ListingsComponent},
  {path: 'listing/:id', component:ListingComponent},
  {path: 'edit-listing/:id', component:EditListingComponent},
  {path: 'add-listing', component:AddListingComponent}

]

the foll is my html for edit-listing component:

 <a [routerLink]="['/listing/'+listing.$key]">Back</a> <!--why does this routerlink does not work - ['/listing/'+listing.$key]-->
    <br />
    <h2 class="page-header">Edit Checklist</h2>
    <form (submit)="onEditSubmit()">
      <div class="form-group">
        <label>Checklist</label>
        <textarea class="form-control" type="text" [(ngModel)]="checklist" name="checklist" required></textarea>
      </div>
      <div class="form-group">
        <label>Notes</label>
        <textarea class="form-control" type="text" [(ngModel)]="notes" name="notes" required></textarea>
      </div>

      <input type="submit" value="submit" class="btn btn-success">
    </form>

the code of edit-listing.component.ts file is as follows... 

export class EditListingComponent implements OnInit {
  id:any;
  checklist:any; /*ngmodel binds the html fields to the properties in the component*/
  notes:any;
  constructor(private firebaseService: FirebaseService, private router:Router, private route:ActivatedRoute) { }

  ngOnInit() {
    // Get ID
    this.id = this.route.snapshot.params['id'];

    this.firebaseService.getListingDetails(this.id).subscribe(listing => {
      this.checklist = listing.checklist;
      this.notes = listing.notes;
      console.log(listing);     
    });
  }

  onEditSubmit(){
    let listing = {
      checklist: this.checklist,
      notes: this.notes

    }

    this.firebaseService.updateListing(this.id, listing).then(() => {

        this.router.navigate(['/listing/'+this.id]);

    });


  }

}

can you pls shed some insight why this may be.. i do have access to $key property of listing coz i see it my console.log

Upvotes: 0

Views: 297

Answers (1)

Jota.Toledo
Jota.Toledo

Reputation: 28464

Try with:

this.router.navigate(['/listing',this.id]);

Try to avoid manually concatenating strings with parameters. The router navigate function makes this out of the box by using the link parameters array. More info in https://angular.io/guide/router

Upvotes: 1

Related Questions