Angular: Dynamic path Routing issue

Question

Im trying to navigate to a detailed component based on a click inside a NgFor. But the app navigates to home page, like the router wouldn't exist

HTML

<div class="campaigns">
  <div class="campaign" style="width:50%" *ngFor="let campaign of campaignList;">
    <a [routerLink]="['/offer-detail',campaign.id]" routerLinkActive="active">
      <p>
        <span>{{campaign.value}}{{campaign.symbol}}</span>
      </p>
      <div class="logo">
        <img src='{{campaign.perk_logo}}'>
      </div>
    </a>
  </div>

  <!-- <div class="campaign" *ngFor="let campaign of campaignList">
  <mat-card >

  </mat-card>
  </div> -->
</div>

The Router.TS

const appRoutes: Routes = [
   //etc
    { 
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'offer-detail:/id',
        component: OfferDetailComponent
    },

    { 
        path: '**',
        redirectTo: '/'
    },

];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})
export class AppRoutingModule {

}

The Inspected Element

<a _ngcontent-c9="" routerlinkactive="active" ng-reflect-router-link="/offer-detail,07704540-6052-11" ng-reflect-router-link-active="active" href="/offer-detail/07704540-6052-11e9-9cc3-f302dba8f944"><p _ngcontent-c9=""><span _ngcontent-c9="">50%</span></p><div _ngcontent-c9="" class="logo"><img _ngcontent-c9="" src="https://clube-newcore.s3.us-west-2.amazonaws.com/perks-logo/dOsrfguX7YogFB6k.png"></div></a>

Can someone tell me what I'm doing wrong? Thank you

madhavsai bhushan · Accepted Answer · 2019-04-24 09:43:46Z

2

there is syntactical error the dynamic path should be like path/:id give it a try

  const appRoutes: Routes = [
       //etc
        { 
            path: 'home',
            component: HomeComponent,
            canActivate: [AuthGuard]
        },
        {
            path: 'offer-detail/:id',
            component: OfferDetailComponent
        },

        { 
            path: '**',
            redirectTo: '/'
        },

    ];

    @NgModule({
        imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
        exports: [RouterModule]
    })
    export class AppRoutingModule {

    }

answered Apr 24, 2019 at 9:43

madhavsai bhushan

2631 silver badge15 bronze badges

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

1 Comment

madhavsai bhushan Over a year ago

if it worked then it will be great if u accept the answer thank You!

Collectives™ on Stack Overflow

Angular: Dynamic path Routing issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related