How to go back to the correct page

Question

I am working on the frontend of a Web Application, with Angular. I created a page that can be accessed from different other pages. From this new page, I can access other pages. I've added a "cancel" button on this page: this button should bring me back to the page I come from. So, for example, the solution provided by How to go back last page doesn't work, because I could have accessed other pages from my page, before I want to go back. So, to solve this, I created my own method (see the code below): this is based on the history of the pages that I visited before. However, this sometimes doesn't work, because the history is deleted sometimes. Is there any solution? Thanks!

  cancelForm(): void {
    console.log(this.routingState.getHistory());
    var count = 1;
    var previousUrl = this.routingState.getHistory()[this.routingState.getHistory().length - count];
    while(previousUrl && (previousUrl.includes('contract-edit/add') || previousUrl.includes('project-add') || previousUrl.includes('employee-edit'))) {
      previousUrl = this.routingState.getHistory()[this.routingState.getHistory().length - count];
      count ++;
    }
    console.log(previousUrl);
    this.router.navigate([previousUrl]);
  }

EDIT: To explain the situation in a better way, I give this example. I have a page containing the details of a certain project of a given company. This page can be accessed from both the page containing the list of all projects, and the list of projects for a certain client of the company. So, when I click on "cancel", I have to go back to the correct page I come from. However, from the page with the details of the project, I can also access the page with the details of a task related to this project. So I can't just use this._location.back() for my "cancel" button, as suggested in How to go back last page, because it could bring me to the page with the task's details, if I've accessed it.

Answer 1

Use a modal window to accomplish this requirement.

Modals

Update: based on the additional info you provided:

1. create a component called projectDetailsComponent that displays the details related to a project. This will also display the tasks related to the project. Use something similar to the code below and put the code relating to project details and tasks where the asstrixs are.

2.Implement this new component in two places: (i.) the page containing the list of all projects and (ii.) the list of projects for a certain client of a company.

Now you will have two instances of a modal window that will open when you click a button in and when you close them, you will be returned to the place you were before.

what the projectDetailscomponent may look like

import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ****BUILD COMPONENT HERE to display project details and tasks***
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'project-Details-component ',
  templateUrl: './modal-component.html'
})
export class projectDetailscomponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(projectDetailscomponent);
    modalRef.componentInstance.name = 'World';
  }
}

.HTML File

<button class="btn btn-lg btn-outline-primary" (click)="open()">Display Project Info</button>