CODEWITHSUNDEEP
angularjsangular-ui-router
Anil Vangari
Anil Vangari

Reputation: 570

UI-Router for Angular: Is it possible to update location without reloading the page

I am migrating an app from AngularJs to Angular 7. In the old ui-router I was able to update the location without reloading the state with below code.

        this.syncLocation = function (paramObj) {
            var params = _.clone($state.params);
            params = _.merge(params, paramObj);

            $state.transitionTo($state.current.name, params, {
                location: true,
                notify: false
            });
        };

However with new Angular & UI-Router I am unable to get this done. Not sure if it is due to Change Detection Strategy or changes to UI-Router itself.

  syncLocation(paramObj) {
    console.log("syncLocation", paramObj);
    let params = _.clone(this.stateService.params);
    params = _.merge(params, paramObj);

    this.stateService.go(this.stateService.current.name, params, {
      reload: false
    });
  }

I have created plunker to reproduce the problem. The problem is described in the component colors.component.ts link. In this plunker I don't want to reload the page even though I check/uncheck the checkbox.

The idea is that I have a complicated page where I cannot afford to lose the contents by reloading the page but still be able to update the location. It is a simplified page with the problem.

Any help is appreciated.

Upvotes: 2

Views: 486

Answers (1)

ttugates
ttugates

Reputation: 6291

You can update the url with Location.replaceState()

See: replaceState()

Inject Location with di and use like this:

constructor(private location: Location) {
...
  private syncLocation(){
    this.location.replaceState(`whatever/state/or/path/you/need`);
  }
}

There are other useful methods in Location such as Path you may want to reference.

Upvotes: 1

Related Questions