Now that we have our route all set up it's time for us to start building out the functionality we're talking about where we have a list of proposals and we can click on them and be taken to the proposal show page.

The first spot that we're going to start off with is we need to make that kind of that capability possible in the proposal show component. So I'm going to come up here and first thing I'm going to do is import a proposal because we're going to have to know what this actually looks like. I'm going to say import proposal from dot slash proposal

import { Proposal } from './proposal';

and then that is it on that side. There is a little bit more of a complicated thing that we're going to have to do here because we need the ability to read in the route parameters. So when you go to the show page the angular system has to have the ability to dynamically see what the route is so that it can pick up that ID. And the way that we're going to do that is we're going to import a couple libraries. We're going to import one called ActivatedRoute and then one called Params. Once we have those and we want to pull them in we're going to get them from angular router.

import { ActivatedRoute, Params } from '@angular/router';

With this in place we still have one more thing that we need to do which is we need to pull in the OnInit library. OnInit stands for on initialization. So we're going to have a few things that we want to happen as soon as the page loads. Technically we could put this in the class constructor. However, that's considered a poor practice and it can be bad from a performance point of view. So what is considered a better way of doing it is by using a OnInit method. That's what we're going to implement. And in fact I'm going to say our export class is going to implement OnInit.

export class ProposalShowComponent implements OnInit {

}

This is letting the system know that we're taking on some of the requirements OnInit has from an interface basis. I'm going to create a couple of variables now. First one is going to be ID and this is going to be of type number. The second one is going to be the route ID and this is going to be of data type any. This is one of the rare times where you're going to use data type any, just because what we're going to be getting back from the route is actually a lot different. It's not a number, it's not a string, it's actually going to be something called an observable which we're going to get into observables quite a bit later on in the course. Right now just know that it's going to pull in the values from the route but with the way angular works it's actually a pretty large task.

Next thing to do is we're going to set up our constructor and in our constructor we are going to do something that we haven't done before, we're going to use dependency injection. In Angular when you want to use dependency injection what you use is inside of a constructor you pass in the word private, the value of the argument, and then the data type. So in this case we're going to take our activated route.

  constructor(
    private route: ActivatedRoute
  ) {}

So what dependency injection is at a very high level is we want to let our component know that as soon as a new class has been instantiated. So in other words, in this case when someone goes to the proposal show page to this component it is going to immediately call this constructor, and this constructor is going to call an instance of this activated route and it's going to store it inside of that route argument. So we can use that throughout the rest of our classes you're going to see right here.

The next thing and the reason why we have Typescript complaining about our proposal show component is because we said that it implements OnInit but we haven't actually called ngOnInit yet. So let's do that. I'm going to put ngOnInit and we're not going to pass in any arguments to it. We're going to say that this is going to be a function that returns void which means it's not going to have any return values. It's simply going to perform some actions.

  ngOnInit(): void {

  }

Here we are going to go grab our ID and we're going to first grab the route ID and then we're going to set our ID right here. So the way that this is going to work is the system's going to go out and it's going to capture the route ID from the url parameters and then we're going to make this set the I.D. here. Technically we could just have the route ID set but that would be a poor practice because eventually we're going to be calling an API with this so it wouldn't make any sense to store the route ID and show that on the screen. We want to actually have the object shown on the screen.

Inside of this, (he's referring to the block of code with ngOnInit), we're going to say this.routeId and set this equal to the parameters. The way you do this in angular is a little bit different if you never used it before. We're going to put this.route.params and then we're going to call a method called subscribe. Subscribe is something we're going to be using a lot and we're going to be using it a lot more once we get into working with API's and having things called on the page and having things called from different services. For right now just know that subscribe is something that gives us access to the object that we want to communicate with. So here we're saying that we want to pull in these parameters and we want to grab the parameters from the route and inside of this we're going to put an anonymous function. We are going to call params and then pass in our fat arrow. And if you took the typescript course you remember the fat arrow is just a way of being able to quickly create a function. So we have our fat arrow and inside of the curly braces we're just setting this.id and we're setting it equal to the params ID. I'm going to put params and then we're going to use our bracket syntax to grab these values. And as you can see that fixed the errors.

One thing that is a little bit tricky with this is this would cause an error for confusing reason and the reason for that is we want to have our number pulled in but numbers coming in from a url are actually strings so angular gives us a really handy tool for fixing this. If you place the plus sign in front of params and what this is going to do is it's going to take this value and then it's going to convert it into a number so it's something we can actually use.

  ngOnInit(): void {
    this.routeId = this.route.params.subscribe(
      params => {
        this.id = +params['id'];
      }      
    )
  }

I'm going to hit save. Nothing's happening here. But let's go into our proposal show component and create a div and say the ID for this proposal is, and then inside of this we'll say, no we're not going to put proposal yet, just the ID.

<div>
  The id for this is: {{ id }}
</div>

We have access to this ID because of this right here.

We can test this by coming here, we can stretch this out a little bit and go to this route.(He made the browser wider on the screen.) So if I go to a proposal dash one then you can see this as ID is for proposal 1.

So this is being pulled in from the routes. If I do the same thing for 100 it's going to pull in 100. So this whole component is working properly and it's pulling in the params and it's making them available. Remember our goal when we started this guide was to give the ability to click on a link here and be taken to the page. So let's open up our proposal list and we're going to open up the template file and each one of these is a new div. And right now it's just plain text.

Let's add an a tag. I'm going to put "a." Then we want routerLink and inside of this we're going to pass in some values and I'm also going to end this 'a tag.' Inside of our router link I want to pass in a few things. I want to pass in slash proposal because that's our route, and then I want to pass in the ID and we can get the ID by just copying this over and sliding it right into the route.

<a routerLink="/proposal/{{proposal.id}}">{{proposal.id}} - {{proposal.customer}}: {{proposal.portfolio_url}}</a>

If I hit save you can see that these are all url's.

If I click on this, look at that, that works perfectly. If I click on proposals, click on this. it's taking us right there. It's taken us to our show page and it's giving us our right ID.

One thing to take note is we're kind of in an intermediary stage right now. This is not actually the true Id. We don't have access to the object inside of the show page yet. Inside of this all we're doing is we're calling the ID because I didn't want to go through the whole process of grabbing another set of mocked values. I think that would've just been a waste of time. All we're doing here is interpolating the parameters that are available in the url and we're pulling that in. Our url's here have it coded in their dynamic so each one of these go to the value that it's associated with. Right here all we're doing is printing out what we have access to in our hash value coming in from our url. It's really an observable but I won't dive into observables yet because it's a pretty complicated topic. What I wanted to do in this stage was show how we can go and grab these route parameters so we are able to take users to the page we want them to go to and from there we can iterate through and grab the different values that we have access to in the set of parameters, and then we can simply print those out on the page.

We covered quite a few things in this guide. We brought in some things such as, OnInit and that gives us access to go out and have some processes occur as soon as the components initialize. In other words when a user goes to the page. Then from there we worked with routes, so we imported activated route and params and that's from the router library and from there we used some tools to be able to grab those parameters and then also save it to a variable so our component has access and it's available to the component and then print it out on the screen on our show page.

We did quite a few things. I'd definitely recommend if you followed along to make sure that you go back and practice implementing this maybe in a few different ways or play around with it because I know this part can be a little bit complicated. I know when I was initially learning Angular two, then this part specifically here, what is happening on the ngOInit side, this part was pretty confusing to me at first because I'd never even heard of the concept of Subscribe, and so that's why later on in the course we're going to really dive deeper into how this works and it will make a lot more sense once we go through a bunch of different examples. This is more of kind of a base case example.

Now that we have all of that set we're ready to start moving on in our application. I think we have all of the components we need on the front end side to at least get started. So I think we're ready to start adding some cool design so we no longer have this ugly looking UI. In the next section we're going to get into how to use Bootstrap 4.

Resources

• Code at this stage