Angular. Replace url parameter

Question

I have some component. In this component I can get url parameter, like this:

const campaignIdParam: number = +this.route.snapshot.paramMap.get('campaignId');

Tell me how I can programmatically replace this campaignId in the address bar of the browser without reloading the page?

Update: My url like this:

http://localhost:4200/#/company/2

kris_IV · Accepted Answer · 2018-12-12 12:17:39Z

2

You can use:

this.location.replaceState(
           path, query, state
        );

From Angular docs:

/**
 * Changes the browsers URL to the normalized version of the given URL, and replaces
 * the top item on the platform's history stack.
 */
replaceState(path: string, query?: string, state?: any): void;

UPDATE:

More specifically you can use this code:

this.location.replaceState(
            this.router.createUrlTree(
                [tempUri],
                {queryParams: queryParamsObj}
            ).toString()
        );

Part of constructor for this code

constructor(private location: Location,
            private router: Router) {
}

edited Dec 12, 2018 at 12:17

answered Dec 12, 2018 at 12:07

kris_IV

2,4642 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

All_Safe Over a year ago

I saw it. But I can't understand, how to replace the campaignId, for example with this url: localhost:4200/#/company/2. For example, 2 I want to replace with 3: localhost:4200/#/company/3

All_Safe Over a year ago

queryParams just add parameter via ?, but I have url like this: localhost:4200/#/company/2

kris_IV Over a year ago

I update my answer - you can use this.router.createUrlTree for this, and update tempUri with : /company/3. You doens't use queryParams - this is parameter after ?

All_Safe Over a year ago

It is unclear how to get tempUri, the witch component can be plugged into different other components, and the URLs there will be different, not just the company. I just wanted to replace the parameter by its name

kris_IV Over a year ago

@All_Safe in your case tempUri is /company/3 or /company/2 - it is a new URI, what you need in your browser url bar.

Collectives™ on Stack Overflow

Angular. Replace url parameter

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related