We're getting close to the end of the course so here we are. And we have our proposal that is now wired up to the API and it's all working properly so we have a true front-end application that communicates with various rails micro service backends. The next thing I want to do is to give our users a little bit of a notification. It's nice that we have the button disappear whenever this is created but it would be a lot better if we were to give a little bit more of a notification on what just occurred. So the way we can do that is I'm going to come right over here and we're in the proposal-new.component.html file and right under this button still within the form but under the button I'm going to create a div and this div is going to be where our notifications are going to reside. So inside of the div we can add the alert so we can say Your proposal has been generated.

Then I want to place in a <a> tag so I'm going to say your proposal has been generated then <a> tag of class="alert-link". And this is going to be a routerLink as well so I'm going to say that I want this directed just to our "/proposals. So it's going to be directed towards proposals and then that's all we need on there. And inside of this <a> tag I'm going to say View all proposals and close out the <a> tag and that's all we need now inside of this div. We want to have some items here. So the very first one is going to be a class so I'm going to set the class="alert alert-success" and then I also want to have a role. So this role is going to be alert. And these are just some things provided from the bootstrap framework.

<div
  class="alert alert-success"
  role="alert"
>
  Your Proposal has been generated <a class="alert-link"
  routerLink="/proposals">View all proposals</a>
</div>

So if I hit save then you can see what this is going to look like and this is all good and it even has our link and if we click on this it goes to our proposal. Now this is good but it needs to be dynamic. We don't want this to show up in less. A proposal has actually been sent. So the way that we can do this is by right here at the very top. Or you could put it anywhere inside of that div. We're going to create another outlet and inside of it we're going to say [hidden]=!submitted

So what this is going to do is it's going to say I want you to stay hidden until the item has been submitted. So this value submitted as you can tell it's the exact opposite of this hidden one. This one is going to not have the bang the bang is what makes a boolean value either true or false so it makes it toggle. So if submitted is true here then it's going to be false here because we have the bang. And now if we can prove it by hitting save and you'll see that this disappears. So everything is good on that side. Now let's come over the browser and I want to see what this looks like on a full desktop feel. I'm going to come here and let's say customer names so customer name will go with Google. This will be Google.com for some reason their proposal was on the same spot and we're going to say Ruby on Rails, Go and API tools and then for estimated hours we'll say this is going to take 90 hours, hourly rate of 120, weeks to complete is going to be 40 weeks and then client email is just going to be jordan@devcamp.com. Now we can click on generate proposal and watch what happens right here our banner should pop up in our button should go away. So if I click that you can see that now without any kind of page refresh or anything like that at all it now has your proposal has been generated. So all of that is working. And I can click on View all proposals scroll down and now we have this new one we created.

And if I click here then it's going to take us to our show page. Now it looks like our show page has a little issue on the style side. So let's take care of that in the next guide and then we are going to go and build out our final feature which is going to be our e-mail component.

Resources

• Code at this stage