I'm not sure about you but I've been getting pretty tired of this ugly UI that we have going on over here and I'm very excited that in this section we're going to start adding some nice styles to our application. And for this we are going to start using Angular's version of Bootstrap. This is going to be Bootstrap 4. And when I say Angular's version I mean that we're not going to directly pull in the bootstrap library by itself but instead we are going to pull in ng-bootstrap. Ng-bootstrap gives you access to bootstrap for components, but this is much more of an angular friendly way of being able to integrate this in. So yes it would be completely possible for you to grab bootstrap import it in your application and you know just grab the CSSA files and then call those whenever you want one of those classes. But that's not really considered the best way of doing it. So we're going to be able to use everything inside of Bootstrap 4 but we are going to integrate it into our application using the more standard approach provided by ng-bootstrap.

If you come to ng-bootstrap.github.io, and I'll put this link in the show notes, go to installation instructions, and this is going to give you everything that you need in order to install this in your system. We're going to use NPM. I'm going to first copy this code

sudo npm install --save @ng-bootstrap/ng-bootstrap


and switch over to the terminal and make sure to stop your server and type in sudo and then this command to install it. It's going to ask you for your password. Type that in and then it's going to go out and make the call and install bootstrap. Looks like everything's good and it's fine that there are some warnings here these are not errors.

The only time you should worry is if it says errors and said it couldn't be completed. Looks like everything is good to go here and we can start our server back up. Actually let's make our changes first and then we'll start it just in case there are any things that we have to add that that would cause an issue with that.

Following along it says the next thing that we need to do is import bootstrap into our main app module. So I'm going to copy this code which says import NgbModule and I'm going to open up our main app module and let's put it right underneath forms.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Give it some space. There's no syntax reason that's just because I like seeing the space there. They have some specific instructions for how this can be declared. Inside of the imports we can't just call NgbModule. You also have to call NgbModule.forRoot. And the reason for this is because they have some slightly different implementation code for items that are on the root side of the module. This is our root module because it's our app module so we need to have our import actually look like this.

      NgbModule.forRoot()

It's going to be NgbModule.forRoot. This is just a function that is letting the ng-bootstrap know that this is going to be placed at the root of the application. Hit save. And let's keep on moving down the line. This is if you want to add this to specific components but we added it to the root module so we're not going to have to make any changes there. (He's talking about a block of code on the website) And then next in our system js config file there is a map declaration and we need to add this whole line of code.

'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

Make sure if you grab all of the code. Come in to system js. And you can find that right here at the root of your system

and you can see right here how we have our map.

This means that inside of here each one of these are separated with a comma and I'm going to add a comma at the end of this one and simply paste this in.

That should be all we need on that side. That is pretty much it. When I went through this originally the one thing that their system doesn't say is actually importing the styles in which I thought was kind of funny. Let's start the server up and I'll show you what I mean. I'm going to type

npm start

It has to load the system up. I'm not sure if you noticed but there is actually no new styles here.

I'm going to click out of all of this. (He closes that browser that he just had open) We have it right here. I'm just keep it here on the right hand side. The way that you fix this is we have to open up our index html file. And I'm going to bring over the cdn code and this is going to be called directly from Bootstrap. So I'm going to put it right here

Now I'm going to hit save. I'll make this code available in the show notes obviously as well. And it's just a link to a stylesheet and it's a style sheet on the Get bootstrap CDN. I like to use this because any changes they make, they will be updated right here and we'll have access to them automatically. Notice what happened when I hit save. Now this is working and our styles are updated. And this looks already a million times better just with the new fonts and our form already looks a lot better. I'm definitely happy with how this looks and we can do other things like say that inside the body tag if you want to do a class and make this a container, then everything inside would now be inside a container. I'm not going to do that because I have some specific styles that I've already worked out in preparation for the course and I want to kind of follow along with all of those patterns that I worked on.

That is how to install Bootstrap 4, while using ng-bootstrap so that we can integrate that into our application so we can start having some baseline styles to work with.

Resources

• Code at this stage