Go back to previous page in Angular 4

Question

I want to have back-to-the-previous page.

Previous Page: job.html Current Page: jobDetail.html

As per instructions, I have added import { Location } from '@angular/common'; to the jobDetail.component.ts file at the top followed by

export class MyDetailComponent implements OnInit {
constructor(private location: Location) {}
    ngOnInit() {
        this.location.subscribe(x => console.log(x));
    }
}

I have a html code in jobDetail.html but don't know how to proceed further. How do I add a previous button correctly. There's no easy tutorial for newbies like me.

<a routerLink="">Back</a>

Try this one: https://stackoverflow.com/questions/35446955/how-to-go-back-last-page — leksinteractive, Nov 22 '17 at 07:07
Thank you. I had gone through that link earlier but couldn't get it to work. I used the solution by Hinrich and it worked. — Elaine Byene, Nov 22 '17 at 07:13

score 21 · Answer 1 · answered Nov 22 '17 at 07:14

21

This worked as posted by Hinrich:

import { Location } from '@angular/common';
// more imports here...

@Component({
  // component's declarations here
})
export class MyComponent {

  constructor(private location: Location) { } // inject Location into class constructor

  cancel() {
    this.location.back(); // <-- go back to previous location on cancel
  }
}

HTML

<a (click)="cancel()">Back</a>

answered Nov 22 '17 at 07:14

Elaine Byene

3,868
12
50
96

this is inefficient as angular's router module has a back method – mast3rd3mon Jul 24 '18 at 09:45
4

can you provide more details to your comment @mast3rd3mon? – Riscie Nov 21 '18 at 10:07

Go back to previous page in Angular 4

1 Answers1