In this guide we are going to go through how we can refactor our link here. So right here we have a router link

routerLink="/proposal/{{proposal.id}}"

and this is fine but I'm not a huge fan of using interpolation directly on the links like this. And I also want to show you a different way to do this. That is considered a little bit more of a best practice so the way we're going to do this is going into our proposal-list.component.ts. So if I go there in the very bottom of the file I am going to create a new function and this new function is going to be called goToShow() and it's going to take one argument and it's going to be an argument of proposal which is of type Proposal. It's going to return void.

goToShow(proposal: Proposal): void {

}

And now inside of it, what it's going to do is pretty cool it's actually going to create a link for us. And so in order to do this we need to call a library here at the top so I need to call the Router library and say

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

After we've done that. Now we need to perform some dependency injection. So inside of our constructor we're going to say

private router: Router

Now that we have our router set. Now we can actually use it because we need to have access to this router in order to properly call it inside here because this is going to have to know where we're at and we need to be able to pass this as a route. And we need our router to be able to generate that for us. So here (inside of the goToShow() method ). Im going to say let link and so links going to be a variable and link is actually going to be an array. And so this array is going to store a couple of things. First it's going to store the '/proposal'. So it's going to store the proposal as a string and the next thing it's going to store is the proposal.id then from there we can say this.router.navigate(link).

goToShow(proposal: Proposal): void {
  let link = ['/proposal', proposal.id];
  this.router.navigate(link);
}

So this is really cool I like being able to use this because what we have done here is we've actually connected the link with the data model whereas before we were just saying hey send the user to this string. And that's one way of doing that. But I kind of like having it in the component itself because I like having all the logic especially all the dynamic logic inside of here. So I'm going to hit save and from here. We can go and (everything's going to be the same). So we can come to the proposal-list.component.html and get rid of all of this

and we can change this to say. And actually we're going to have to we have to create an outlet for this or I'm sorry the input. So if you remember when we used our forms how we had the concept [( )]and that's how we used our [(ngModel)]. That's what we use to set our form values. Well, here what we're going into is we need to capture a click and to do that. That's an input. So we're going to say (click) and surround it in parentheses because that means that everything inside of this now is going to be captured for our clicks. So inside of this we're going to pass in our method which is "goToShow(proposal)". So instead of passing in the ID or anything like that we're going to pass in the actual proposal which we get through the iteration loop.

<a (click)="goToShow(proposal)" class="proposal-link">

Now if I hit save. We'll see if this works and we'll come in the browser. Now if I click on this everything is still working perfectly. So we have successfully refactored this code and now we're actually working with the object itself instead just the object id and hard-coding this in which is in the angular community definitely considered a better practice.

Resources

• Code at this stage