Angular 4 - Activated Route with param

Question

I have a list page and a detail page. Selecting an item from the list page will route to the details page.

routing module:

const itemRoutes: Routes = [
    { path: 'item', component: ItemListComponent},
    { path: 'item/:id', component: ItemDetailComponent  }
];

list component:

constructor( private route: ActivatedRoute, private router: Router) {}

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

Problem: Selecting an item goes to this url: http://localhost:3000/item/2

But the browser shows "Not found" error.

On the console, I see this:

:3000/item/2:1 GET http://localhost:3000/item/2 404 (Not Found)
Navigated to http://localhost:3000/item/2

What am I doing wrong?

Solution 1

I think the issue was that I had this on the html for the list page:

<a href="item/{{item.id}}">{{item.id}}</a>

I changed it to:

<a [routerLink]="['/item', item.id]">{{item.id}}</a>

and removed this from the component:

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

This worked!

Solution 2

Your routes are well defined. But you have 3 basics ways to redirect: href, routerLink and router.navigate.

---

The classic href property in a HTML anchor tag

This one is outside Angular control. In the template (html file) of your Item List component you could add the simple anchor html tag:

<a href="...an static url..">Text of this link</a>

But, because this way is outside Angular control, you should use this solution maybe for outside perdurable static urls. Like a Google Page, Facebook Page, etc.

So, in this scenario: The user interacts with your DOM and your DOM will fire an event making your browser to redirect you.

Using routerLink attribute

This solution requires the RouterModule imported in some way to your actual ngModule to work. The most basic way to do this, in your main module (Commonly app.module.ts) you should need to add:

import { RouterModule } from '@angular/router';

And, add RouterModule inside the imports array in your @NgModule decorator.

@NgModule({
  ...,
  imports: [
    ....,
    RouterModule,
    ....
  ],
  ...
})

Then in the template of your ItemListComponent, you could reference to an static path, or generate one dynamically.

To reference a static path, you only need to add the routerLink attribute with your path as a value:

<... routerLink="/item">If you click this element, you will be redirected to ItemListComponent</...>

Note: <...></...> means that the tag you use doesn't matter at all if its rendered in your page.

To reference a generated link, for example model/item/4, you need to add the routerLink attribute as an input (Between []), and an array of path segments which contains each segment in a sequencial order:

<... [routerLink]="['/model', 'item', item.id]">...</...>

Being item an accesible object on your template (public variable inside the class component OR a variable declared in the template like using *ngFor="let item of items") with an id as a property.

Note: You could simplify that link using [routerLink]="['/model/item', item.id]", because /model/item is static in the url.

So, in this scenario: The user interacts with your DOM, your DOM will call the RouterModule, and this last one will end looking for a match inside your routes making Angular to redirect you.

Using the method navigate from Router class.

This solution aditionally requires the Router imported and injected in the component you want to handle the route (ItemListComponent in this case - ItemList.component.ts file).

To import the Router, add this:

import { Router } from '@angular/router';

To inject it; add it to the constructor:

constructor(private router: Router) {}

Then, add the method you want to handle the redirection in your class, like the one you added:

goToDetail(item) {
    this.router.navigate(['/item', item.id]);
}

And lastly, you should need to add in your template an event which will call your function. For example:

<... (click)="goToDetail(item)">...</...>

So, in this scenario: The user interacts with your DOM, your DOM fires an event which will fire a method on your class which will call the method navigate from Router class, which will end looking finally for a match inside your routes making Angular to redirect you.

Comments

[JB Nizet]

Shouldn't it be this.router.navigate(['item', item.id])?

[Jay]

Still having the same issue - "Not found".

[JB Nizet]

Do you refresh the page after the navigation, or do you just navigate?

[Jay]

I have changed it to the same array, still having the same issue. "Not found"

[abbas-ak]

Correction: Square bracket misplaced. this.router.navigate(['item', {id: item.id}]);