Angular Routing not working when adding ID as a parameter in URL

Question

new to Angular here. I have the following in my app.module.ts

RouterModule.forRoot()
{
...
      { 
        path : "posts/:id",
        component: PostprofileComponent 
      },
      { 
        path : "posts",
        component: PostsComponent 
      },
...
}

The following is redirecting correctly to PostprofileComponent .

http://localhost:4200/posts/2

However this link does not... it redirects to PostsComponent .

http://localhost:4200/posts?id=2

Shouldn't they behave the same? What am i doing wrong?

Answer 1

In your RouterModule :

RouterModule.forRoot()
{
...
    {
        path : "posts/details/:id",
        component: PostprofileComponent
    },
    {
        path : "posts/details",
        component: PostprofileComponent
    },
    {
        path : "posts",
        component: PostsComponent
    },
...
}

Usage example using query params : (More info here )

this.router.navigate(['/posts/details'], { queryParams: { id: '2' } });

URL: http://localhost:4200/posts/details?id=2 return to => PostprofileComponent

---

Usage example using route params :

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

URL: http://localhost:4200/posts/details/2 return to => PostprofileComponent

---

then http://localhost:4200/posts return to => PostsComponent

Answer 2

The second option is using url query parameters while the first option is using angular routing parameters.

ie using this:

   this.router.navigate(['/posts', '2']);

would result in your first route http://localhost:4200/posts/2

and then this:

this.router.navigate(['/posts'], { queryParams: { id: '2' } });

would result in second route http://localhost:4200/posts?id=2