Final Style Changes to Angular 2 Document Component
This screencast walks through how to make the final style changes to the Angular Document component.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

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.

large

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 }}

large

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

large

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>

large

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