Angular 4 - Activated route with parameter

Your routes are clearly defined. But you have three main redirection methods: href , routerLink and router.navigate .

Classic href property in HTML anchor tag

This element is outside the Angular control. In the template (html file) of the Item List component, you can add a simple html anchor tag:

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

      

        
        
        
      

    

But since this way is outside the Angular control, you should use this solution, perhaps for external persistent static urls. Like google page, Facebook page, etc.

So in this case: the user is interacting with your DOM, and your DOM will fire an event that causes your browser to redirect you.

Using the routerLink Attribute

This solution requires a RouterModule imported in some way into your actual ngModule to work. The easiest way to do this, in your main module (usually app.module.ts), you need to add:

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

      

        
        
        
      

    

And add RouterModule inside the import array to your @NgModule decorator.

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

      

        
        
        
      

    

Then, in the template of your ItemListComponent, you can reference a static path or generate dynamically.

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

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

      

        
        
        
      

    

Note: <...></...>

means that the tag you are using does not matter as long as it appears on your page.

To link to a generated link , for example model/item/4

, you need to add the routerLink attribute as an input (between []

) and an array that contains each segment in the following order:

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

      

        
        
        
      

    

Being a member of an accessible object on your template (a public variable inside a class component, or a variable declared in a template, for example with *ngFor="let item of items"

) with an identifier as a property.

Note. You can simplify this link by using [routerLink]="['/model/item', item.id]"

because /model/item

static in url.

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

Use the method to pass from the Router class.

This solution requires the Router to be imported and inserted into the component that needs to handle the route (the ItemListComponent in this case is the ItemList.component.ts file).

To import your router, add the following:

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

      

        
        
        
      

    

To enter it; add it to the constructor:

constructor(private router: Router) {}

      

        
        
        
      

    

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

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

      

        
        
        
      

    

Finally, you need to add an event to your template that will trigger your function. For example:

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

      

        
        
        
      

    

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