Router in Angular web app does not work on same component

Question

I have a problem with angular router.

Currently I'm in my router /HOME and I'd like to route from a button from there to /HOME#id=123456

How can I do that? I'm trying something like:

<a class="app-card bg-petrol"[routerLink]="['/HOME']" [queryParams]="{'id':'123456'}">

But nothing happen - even nothing in the console.

edit: added routes file

app.routes.ts

{
  path: Routes.HOME,
  loadChildren: () => import('../routes/home/home.module').then(m => m.HomeModule),
  data: { hideNavSearch: true },
},

Aleksey · Accepted Answer · 2020-04-17 14:58:56Z

2

You should use queryparams with the link. For example :

<a [routerLink]="['HOME ']"  [queryParams]="{'id':'123456'}">

answered Apr 17, 2020 at 14:58

Aleksey

301 silver badge2 bronze badges

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

Comments

AhmerMH · Accepted Answer · 2020-04-17 15:06:38Z

0

In Angular, you need to define a parameterized path if there you want Angular to route to it. Add a new path in app.routing.module.ts with same name but having a parameter id.

app.routing.module.ts

@NgModule({
  declarations: [ ... ],
  imports: [
    RouterModule.forRoot([ 
      { path: 'HOME', component: HomeViewComponent }, 
      { path: 'HOME/:id', redirectTo: 'HomeViewComponent' } // add new route with id parameter
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

After that call your page like this:

<a routerLink="/HOME"  [queryParams]="{'id':'123456'}">

This will resolve your problem.

answered Apr 17, 2020 at 15:06

AhmerMH

6887 silver badges18 bronze badges

2 Comments

alfredo Over a year ago

I've added my routing file, looks very different, how should I add the params?

AhmerMH Over a year ago

Can you create a small stackblitz demo. It would be much more clear. Also, please add complete routing file with ony HOME route, as it will be enough to provide proper answer.

Collectives™ on Stack Overflow

Router in Angular web app does not work on same component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related