Question 251599 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular problem with nested routing, displaying child component above parent component

In my application, I have implemented nested routing. The /offers endpoint displays all offers, while /offers/{id} displays a specific offer. I know that the parent must have a router-outlet, but the problem is that instead of displaying a specific offer on a separate page, it displays that offer above the list of all offers. The URL in the browser is correct; it just displays the offer above the list of offers.

app-routing.module

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { 
    path: 'offers', 
    component: OffersComponent, 
    canActivate: [authGuard],
    children: [
      { 
        path: ':id', 
        component: OfferDetailComponent, 
        canActivate: [authGuard]
       }
    ] 
  },
];

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

app.component.html

<div class="app-header">
  <app-header></app-header>
</div>
<div class="app">
  <router-outlet></router-outlet>
</div>

offers.component.html

<router-outlet></router-outlet>

<section class="section">
    <div class="offers-container">
        <h1>All offers</h1>
        <a *ngFor="let offer of offers" routerLink="/offers/{{offer.id}}" class="offer-card">
            <h2>{{ offer.position }}</h2>
            <p>{{ offer.location }}</p>
        </a>
    </div>
</section>

Is there a way to prevent the selected offer from being displayed above the list of offers and instead show it on a separate page?

Tags:

2

Answers


  1. 0

    On your offers.component.html, your <router-outlet></router-outlet> is above your list. For child routes, angular uses the parent component (here OffersComponent) defined router-outlet to display the child component. If you want your child component to be rendered in the root navigation, just declare it on the same level :

    [
   { 
      path: 'offers', 
      component: OffersComponent, 
      canActivate: [authGuard],
   },
   { 
       path: 'offers/:id', 
       component: OfferDetailComponent, 
       canActivate: [authGuard]
   }
]
    Login or Signup to reply.
  2. 0

    Remove the child route and make the OfferDetailComponent a sibling route to the OffersComponent.

    const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'offers', component: OffersComponent, canActivate: [authGuard] },
  { path: 'offers/:id', component: OfferDetailComponent, canActivate: [authGuard] }
];

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

    Your offers.component.html should look like

    <section class="section">
    <div class="offers-container">
        <h1>All offers</h1>
        <a *ngFor="let offer of offers" routerLink="/offers/{{offer.id}}" class="offer-card">
            <h2>{{ offer.position }}</h2>
            <p>{{ offer.location }}</p>
        </a>
    </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search