In this guide, we're going to implement our styles for our proposal list component and I'm going to start off by looking through the documentation and some of the code examples for bootstraps so I'm going to click on documentation and go down to components.

Inside of this, there is a very cool component that I have played around with I think would work perfectly. And it is the list-group. If you scroll all the way down to the bottom it has all kinds of different ones but this custom content one this is the one that I played around with I really liked a lot so I'm going to copy the styles here. And I'm going to paste them in our code.

EXAMPLE
html
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>


I have our proposal list component open right here and I'm going to paste this in just so we can see it. Here you can see our proposal component and then our new items. So these are list group items.

We're going to do a couple of things in order to get this working properly. The first thing is we need to nest all of our code inside of a container. So I'm going to create a div for that and then move all of that up so it's nested inside of that div. And then from there, I'm going to call the container class and you can see that that gives us our nice margin that we want to have on the top of our webpage.

For our heading, this is a great example of why we wouldn't want to style all of the h1 tags exactly the same in the whole application because with what I'm going to be doing I may not want to have that white headline one so I'm going to slide that into the blue item heading tag. I think that will be kind of a cool way of doing it.

Now before we go into this, this part can be a little bit tricky I had to play around with these styles quite a bit because you can set this up with HTML pretty easily. But whenever you have some of the looping mechanisms and some of the link systems that angular has then it gets a little bit more tricky so I'm going to switch so we can see everything just on one screen and from there we're going to be able to kind of wrap everything up. I'm going to go inside of our container and create another div and this is going to be <div class="list-group">. If you notice here I'm following this pattern where my divs are all class="list-group".

I just have the code we copied from bootstrap for the sheer reason of just being able to look at it and grab the various classes and that kind of thing. For the very first one, this one's pretty easy because we're not looping over anything. We simply want a list group item right here. Now, this is going to be just a regular tag but we don't even want to link to anything here. So we're not going to have an href or anything like that. This is just something that we're going to do so that we can have this nice blue style and so that it matches up.

So very first thing with this tag is to add a class and this class is going to be of lists group item and it's also going to have list group item action active than from there we can put our tag in.

And now if I hit save then you can see that this has this nice blue color.

So this is the first part of what we need but we're not done quite yet. So here we're still within our list group and we want to make sure that we have all of these items nested inside of that. So next thing we're going to do is to create a tag because remember right here we have divs. But the problem with this is the way that our styles need to work is we can't have a div or else it's going to almost look like a card except it's going to be a card that's pressed up against the other one and I'll show you exactly what that looks like just right here. Just a can know that I'm not lying to you. So here I'm going to come in and we'll add the list group item. Right next to it. So inside of this div, I'm going to a class and I'm just going to copy the list-group-item list-group-item-action from down below. So if I do this and hit save. You can see that this one doesn't exactly have the look and feel that we're going for.

So we can keep this but we're going to have to update it because I want to have it so that if you click anywhere on this button it'll work but with the way, it's structured now is that I actually have to click the link and that's not what I'm wanting. I'm wanting something that's going to be more friendly on touch base devices. Notice in the other buttons how all of this is a link the entire component is a link. And that's kind of the style I'm going for. So let's clean this up and the first thing I'm going to do is I'm going to make a span instead of a div.

        <span *ngFor="let proposal of proposals" class="list-group-item list-group-item-action">
            <a (click)="goToShow(proposal)" class="proposal-link">
                <h5 class="list-group-item-heading">{{proposal.customer}}</h5>
                <p class="list-group-item-text">
                    {{ proposal.hourly_rate * proposal.estimated_hours | currency:'USD':true:'.0' }}
                </p>
            </a>
        </span>

And then inside of this we're going to have our tags so right now we'll just have our router link and this is I believe everything we need on the tag side because we're passing in our proposal ID which is what we want. Eventually we'll clean this up and we'll create some methods that will make it even better to work with.

But now inside of the tag let's get rid of all of this code and we're going to structure it so it looks like our example.

So notice how we have this h5 heading and now I want to dynamically call the proposal customer. So this is going to be the customer name.

And now if I save.

And now the actual component is what is clickable. So now you can click on any of these little list items and I don't have to actually click on the link I can click anywhere in the card. So this is a million times better. I'm definitely liking this. This is this is more what we're looking for.

The next thing after this is I want to create one more item and this is just going to be a tag. And inside of this, it's going to be list group text which you can see right here, in fact, I'll just copy this whole thing over and bring it up.

And if you're wondering what to put here you can put anything you want but what I actually want to put in is a calculation because the way that I look at it from a freelancer point of view if I come to a list of my proposals I want to see the proposal and who it's to "So the customer" the next thing I want to see is how much the proposal was for because that's usually what I'm trying to look up.

So we already have that calculation in place. And what I'm going to do is go to a proposal-new.component.html and if you scroll all the way down you know that we can just grab {{ proposal.hourly_rate * proposal.estimated_hours }} and paste it in and hit save. And now we have this value. So each one of these I believe that was for the same amount. We can verify that. But let's get rid of this sample text.

So we have a proposal hourly rate times the estimated hours and everything on that side is good. So your proposal-list.component.html should look like this

<div class="container">
    <div class="list-group">
        <a class="list-group-item list-group-item-action active">
            <h1 class="headline">Proposal List</h1>
        </a>
        <span *ngFor="let proposal of proposals" class="list-group-item list-group-item-action">
            <a (click)="goToShow(proposal)" class="proposal-link">
                <h5 class="list-group-item-heading">{{proposal.customer}}</h5>
                <p class="list-group-item-text">
                    {{ proposal.hourly_rate * proposal.estimated_hours | currency:'USD':true:'.0' }}
                </p>
            </a>
        </span>
    </div>
</div>

And there are only a couple other things that I want to change on this. The first is this proposal-list h1 let's actually call our headline class here. And you can see that I think it looks better with the tests being white

you know I like the way all this is looking except I'm not a huge fan of the underline. So I think that the fact that the tag kind of changes colors when we hover over is all we need let's actually create a custom style for that.

I'm going to open up proposal-list.components.ts and as you can see we do not have a dedicated CSS file yet so let's add that.

We are going to have styleURLS: [' '] and inside of this we're going to have a proposal list components CSS. And let's create this new file. then lets split our screen so we can have these both open at the same time.

So now that we have our HTML we can select some of these things however we need to.

First thing is let's add a class to these tags so class is going to just be proposal-link. You can call yours whatever you want,
I think that makes the most sense. Now we can style this, so let's go proposal link and I believe we can just call hover on it just like that. And this is going to be text decoration it's going to be none.

.proposal-link:hover {
  text-decoration: none;
}

Now if you hover over that fixes it, I'm liking that way more. That looks much more professional.

Click on these and they are still working and it's taking us to the right items so everything on this is looking fantastic. Now one thing that I do want to go into in the next guide is how we can start styling our currency. So one thing you may notice is if you look at these values you can see that we have an Eighteen thousand right here and which seems like it's fine except that it would be really nice to customize this from a currency perspective so that this if it is 18000 it would say $18,000 then you could have .00 after it something that looks like a true financial kind of thing you know something like this where you instead of having this you know say something like 18. I think that would look better. So there is a very cool way that you can implement that inside of angular to using something called pipes. In the next guide I'm going to walk through how we can add a special currency pipe into an angular out.

Resources

• Code at this stage