CODEWITHSUNDEEP
angular
Moshe
Moshe

Reputation: 2684

Angular Redirect to same component

I have a case where a user goes to /details;id=1, in the DetailsComponent, I have a table displaying similar objects, with a button that redirects to /details;id=x where x is the id of the object.

When user clicks on the button the URL params updates, but the page remains static (shows details for id=1, but the url params is x)

The (click) handler of the button is:

goToDetails(id: number): void {
    this.router.navigate ( [ '/details', { id: id } ] );
}

How do I make Angular "refresh" the component?

Upvotes: 1

Views: 11430

Answers (1)

DeborahK
DeborahK

Reputation: 60528

Angular provides three types of route parameters: 1) Required parameters. 2) Optional parameters. 3) Query parameters.

The syntax you are using is for optional parameters. You may want to instead use required parameters. The syntax would then look like this:

this.router.navigate ( [ '/details', id ] );

In the component, you can then read the parameters like this:

this.route.params.subscribe(
   params => {
      let id = params['id'];
      <Add your code here>
   }
);

I normally put this code into the ngOnInit lifecycle hook method.

The route configuration would look like this:

{ path: 'product/:id', component: ProductDetailComponent }

You can see a complete example here: https://github.com/DeborahK/Angular-Routing

Upvotes: 3

Related Questions