What is the best way to retrieve the previous URL in Angular after the current URL has been refreshed or changed

Imagine being on the current URL of

http://localhost:4200/#/transactions/overview/5?tab=2
and then navigating to
http://localhost:4200/#/deals/detail/

If I refresh the deals/detail page, I want to return to the previous URL which could be something like

http://localhost:4200/#/transactions/overview/5?tab=2
.

How can we achieve this in Angular? Thank you for any help and suggestions.

#Code snippet for navigating to deals/detail page

 editDeal(deal:any){
        let dealType = '';
        const state = { 
          data: {
            transaction: this.transaction,
          },      
        }
        this.gotoDealDetails(state);    
      }
    
      gotoDealDetails(state:any){
        this.route.navigateByUrl(`deals/detail/`, {state: state});
      }

#Detail details page component

export class DealDetailsComponent implements OnInit {


      dealDetails = null;
      leaseDetails = null;
      currentRentSchedule = [];
      isInEditMode = false;
      fiscalYear = null;
      pmrType = null;
      partnerType: any;
    
      constructor(
        private _route: Router,    
        private _dealService: DealService,
        private dialog: MatDialog,
        private _notificationService: NotificationService) {
        this.urlData = this._route.getCurrentNavigation().extras.state.data
      }
    
      ngOnInit(): void {    
    
      }
    
      ngAfterViewInit() {
    
      }
    
    }

Answer №1

Trigger an event on page refresh and use the back() method in your Angular component to perform a refresh:

Example in component.ts file:

import { Location } from '@angular/common'

    @Component({...})
    export class AnyComponent {
      constructor(private location: Location) {}

      back(): void {
        this.location.back()
      }
    }

For more details, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

I am working on a simple form with checkboxes and I need to send only the checked boxes to TypeScript. However, when I attempt to save the data by clicking the save button, I encounter an error message {test: undefined} Below is the form layout: <ion-c ...

Guide to implementing fullpagejs with Angular 7 selectors

I have been working on an Angular 7 project with fullpagejs by Alvarotrigo. Everything seems to be functioning properly, but I am facing an issue where the content of my website is not visible because the color of fullpagejs covers it all. When I use norma ...

How to convert typescript path aliases into relative paths for NPM deployment?

I am currently working on a typescript project that utilizes paths for imports. For instance: "paths": { "@example/*": ["./src/*"], } This allows the project to import files directly using statements like: import { foo } from "@example/boo/foo"; Whe ...

You are unable to link to <custom directive selector> because it is not recognized as a valid property of 'div'

I am currently working on a project in StackBlitz, and you can find the link here: https://stackblitz.com/edit/angular-fxfo3f?file=src/directives/smooth-height.directive.ts I encountered an issue: Error in src/components/parent/parent.component.html (2:6) ...

Angular: undefined value detected during NgOnInit execution

Although the topic has been discussed, I am unable to find a solution to my specific issue. The problem lies in my parent component that returns data passed to an input. Parent component TypeScript: public productList!: IDocumentProduct[]; constructo ...

Contrast: Colon vs. Not Equal Sign (Typescript)

Introduction Hello everyone, I am new to Typescript and currently grappling with some fundamental concepts. When defining a parameter for a function, I typically specify the type like this: function example(test: string){...} However, as I delve deeper ...

The Next.js API has a mysterious parameter that remains undefined

I currently have a component implemented import React, { useEffect } from "react"; import styles from "../styles/success.module.css"; import { useRouter } from "next/router"; import axios from "axios"; const Success ...

Executing Angular CLI tasks using a script file rather than directly from the CLI? Embracing the power of Localization and Internationalization

Our Angular 2 app is gearing up for internationalization/localization, and I am looking to create scripts that can handle tasks such as generating translation source files or building/serving the application with translations in a specific language. Inste ...

The Angular application is encountering difficulty accessing the Django Rest Framework API due to a CORS problem

Encountering a CORS problem while trying to access a Django Rest Framework REST API from an Angular 6 application. The API is hosted at http://localhost:55098/admin. It functions properly when accessed with Insomnia. The Angular app is running on http://l ...

Convert the generic primitive type to a string

Hello, I am trying to create a function that can determine the primitive type of an array. However, I am facing an issue and haven't been able to find a solution that fits my problem. Below is the function I have written: export function isGenericType ...

Encountering issues during the installation of node modules within an Angular application

I encountered an issue while setting up my angular app. Upon trying to install the node modules using the command npm i --save, I received the following error message. Error: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network This is a pr ...

Replace Material UI propTypes with new definitions

I am currently working with React, Typescript, and Material UI. To globally disable the ripple effect for the ListItem component, I am using createMuiTheme.props in the following manner: createMuiTheme({ props: { MuiListItem: { disableRipple: t ...

Exploring the dynamics of parent and child components in Angular

I'm currently working on an Angular2 project and I've hit a roadblock with the parent/child component interaction. My goal is to have a "Producer" entity that can have multiple "Products". Ultimately, I aim to retrieve lists of products associat ...

Angular4 and jQuery working together for effective navigation and pagination

Trying to implement pagination in angular 4 and jQuery, but encountering an issue where clicking on the next button causes it to skip through multiple pages at once (2, then 3, then 5)... Component code: addClass(x) { $(".page-item").click(function () ...

Dissimilarities in behavior between Angular 2 AOT errors

While working on my angular 2 project with angular-cli, I am facing an issue. Locally, when I build it for production using ng build --prod --aot, there are no problems. However, when the project is built on the server, I encounter the following errors: . ...

Experimenting with an Angular 2 component using a simulated service

Currently, I am experimenting with testing an Angular2 component that relies on a service. In order to conduct the test effectively, I aim to provide a stubbed service. However, it appears that the test component does not recognize this stubbed service. ...

Resetting ng-select values in an Angular application: A quick guide

Currently, I am utilizing ng-select within a modal window. <div class="modal-body"> <div class="form-group has-feedback"> <ng-select #select name="currenies" [allowClear]="true" [items]="currencyList" [disabled]="disabled" (selected)="sel ...

Http' does not have the 'update' property

I recently implemented Angular 2 Release and utilized 'Http' from '@angular/http' for my project. However, I encountered an error when I invoked the method 'update', which resulted in the following message: "Evidently, th ...

Ways to attain a similar format - input map

After pressing the save button, I am aiming to achieve the following effect: "timeTable":{ "0": [{"from":"08:00","to":"12:00"}, {"from":"14:00","to":"18:20&q ...

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...