- Read Tutorial
- Watch Guide Video
I'm really liking how our proposal list is coming along I think it looks professional and it's also just simple and straightforward for people to use.
One thing I do want to do though is update this number here because we know this is the generated estimate cost. However other people may not know that especially if they're all different and there are all kinds of weird combinations of numbers. People may think it's an IED or something like that. Now there's a couple ways that we could do this we could just come here and put a dollar sign in front of this hit save and you can see that now it's there's a dollar sign there.
And that would be one way of doing it.
However, in angular 2 we have a concept of pipes. Now, pipes are a very cool very powerful kind of tool that allows you to dynamically change a value or I should say dynamically format a value so that it can fit any kind of standard parameters. Pipes are a pretty large topic and you can do all kinds of things you can implement filters you can do a lot of you know kind of advanced functionality. For this we are going to format our currency. If I hit save here and get back to the regular number I'm going to add a pipe. And the way you do it is you add the pipe character( | ) that is the key that is directly above return and to the right of the right bracket. And I'm just going to say currency. Now if I hit save now you can see that that has updated our code and now it says USD18,000.00 so it adds the comma in there for us which we didn't get when we put just the dollar sign in front and then it adds to decimals.
This is fine however it's not exactly what we're looking for. And thankfully currency has options so you can pass options to your pipes. And in this case, I'm going to pass a couple. First I'm going to pass in USD just designate it's U.S. dollars and then the way that you separate your arguments inside the pipe is with a colon and so I'm going to say currency: 'USD' as a string then Colon true. And then colon as a string point zero. All together those lines of code will look like this
{{ proposal.hourly_rate * proposal.estimated_hours | currency: 'USD' :true: '.0' }}
What this is going to do is it's going to give us the dollar symbol which is the true item and then it's going to remove the trailing zero so if I hit save now you can see that this looks a lot better.
You can definitely play around with these variations. If I say false instead of true and hit save you can see that now it just shows USD but doesn't show the dollar sign. I personally think the dollar sign makes the most sense. So I'm going to keep true. And then you know you could play with the decimal as well you could change this if you want to have one zero. You can change it to two if you would like to have two zeros. I personally just like how it's rounded off with no zeros. And there you go. So let's also take this pipe and let's put it in our proposal list. Our new proposal component template. So you fuzzy search(command + t) proposal-new.component.html and if you come pretty much all the way down to the bottom.
We can actually see this happen in real time. If I click on new proposal and I put in my estimated hours that being 25 and my hourly rate at bein 100 we should get a rate of 2500 our total which is what we have here. But now let's replace this and have our pipe there now if I save we come over here and do the same thing so I'm going to say estimated hours 25 hourly rate of 100. Now come down and you can see that we have $2,500 here and it is nice and formatted. So that is how you can use pipes in angular 2. And I highly recommend that you go through the pipe documentation that angular 2 provides because you'll be able to see all of the wide range of functionalities and different things that you can implement using pipes.