Before we move on and we start working on our proposal components I want to polish up on our HTML. I think it looks good. However you may have noticed something notice this updated_at date.

This is exactly what Rail's has in the system but it's not really what I want to have. I want to have something that looks a little bit more user-friendly and it's just going to show the last time that the file was updated. So I'm going to come into the documents.component.html and right here you may wonder what's the best way to style dates, in Angular you have a very helpful tool. And if you guessed that it's going to be a pipe and then you guessed perfectly right.

Just like we were able to customize our currency by going and adding different items like the dollar symbol and the commas automatically. With our pipes, we can also add in a formatted date. So come here to doc.updated_at and add a pipe | and then just type date right afterward.

{{ doc.updated_at | date }}

Now if you save. You can see that the data returned is now in a much more friendly format

and we could even say something like Last Updated: And then I want to bring it all up. So it's above the button and below the title, I think this would be a good spot for.

<p class="card-text">Last updated: <small class="text-muted">{{
doc.updated_at | date }}</small></p>

Hit save.

And there you go. Actually, I'm not sure about that. I think Last updated: should actually be inside of the <small> style. And I'm going to format the text just a little bit just to make it easier to see. So I'm going to put this inside here. Hit save and you can see that looks a lot better.

<p class="card-text">
  <small class="text-muted">Last Updated {{ doc.updated_at | date }}
  </small>
</p>

That's perfect. I am very happy with this module. So our component on the document side is totally done. We have everything that we need and we are ready to move on to creating our proposals and wiring this up with a new proposal app. So in the next guide, we're going to dive back into Rails and we're going to create a proposal application.

Resources

• Code at this stage