Angular: How to extract parameters from child routes?

Question

Let's say I've this table

+--------------------+-------+----------+---------+
| Label | Date       | Items | Location |         |
+-------+------------+-------+----------+---------+
| REF 1 | 12/12/2017 | 3     | Floor 1  | Details |
+-------+------------+-------+----------+---------+
| TXD 7 | 12/31/2017 | 1     | Floor 3  | Details |
+-------+------------+-------+----------+---------+

Details is a button. When user clicks the the Details button, div with tabs should display on the bottom.

+------------------------+
| TAB 1  | TAB 2 | TAB 3 |
+--------+-------+-------+------------------------+
|                                                 |
| Content of the TAB 1                            |
|                                                 |
|                                                 |
+-------------------------------------------------+

Here's the routing

RouterModule.forChild([
  { 
    path: 'gift', component: GiftComponent, 
  },
  {
    path: 'gift/:id', component: GiftComponent,
    children: [
      { path: '', redirectTo: 'giftItemList', pathMatch: 'full'},
      { path: 'giftItemList', component: GiftItemListComponent },
      { path: 'giftItemDetails', component: GiftItemDetailsComponent }
    ]
  }      
])

When user the Gift link from the menu <li><a [routerLink]="'/gift'">Gift</a></li>, the gift component is displayed. Only the upper portion is displayed.

If the user clicks the Details button,

 <td>
     <button (click)="displayGiftItems(gift.id)" class="btn btn-link">
        Details
     </button>
</td>

Then displayGiftItems function from the component is called. It makes the the surrounding DIV visible where the child component will be displayed. Then it navigate to the child component.

 displayGiftItems(id: number, e) {
if (id) {
  this.giftItemsPanelIsVisible = true;  
  this.router.navigate(['giftItemList'], { relativeTo: this.route});
}

}

When I click the Details button, the url doesn't have this form: gift/1/giftItemList.

How to get such url and how to extract parameters from this url?

Thanks for helping

What form does your url have? I don't see anywhere that you are actually adding the id to the route? — DeborahK, Dec 08 '17 at 08:21

score 1 · Accepted Answer · answered Dec 08 '17 at 08:24

1

You could try something like this:

displayGiftItems(id: number, e) {
if (id) {
  this.giftItemsPanelIsVisible = true;  
  this.router.navigate(['gift', id, 'giftItemList']);
}

You then read it something like this:

const id = route.paramMap.get('id');

For more information, see this post: Sending data with route.navigate in Angular 2

answered Dec 08 '17 at 08:24

DeborahK

57,520
12
104
129

Hi Deborah, I'm learning Angular watching your course now on pluralsight. At least, this time the url is in the right form: `http://localhost:4200/gift/1/giftItemList`. But nothing is happening on the bottom. When I comment out this line `this.router.navigate(['gift', id, 'giftItemList']);`, the panel appears. Otherwise, nothing happens ( – Richard77 Dec 08 '17 at 16:38
1

:-) Would it be possible to build a plunker that demonstrates your issue? Otherwise you can view the example applications posted to my github for suggestions on routing. My "Angular Routing" course shows how to implement routed tabs. – DeborahK Dec 08 '17 at 18:11
1

The problem was that I had a little understanding of the way Angular routing works. I've watched your course on routing and solve this and other issues I was experiencing. – Richard77 Dec 28 '17 at 22:35

Angular: How to extract parameters from child routes?

1 Answers1