Angular 4: Bootstrap & Components (part 2)

First install Bootstrap,

$ npm install --save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

Then in the project root run,

$ npm install,

Create a component called ‘sum’ with,

$ ng g c sum

Next get the sum component into the root component.
Go to src/app/app.component.html and place the selector for the sum component which is,

<app-sum></app-sum>

This gets placed as follows,

Now that we’ve placed our sum component in the root component we would like to set it’s contents. This can be done in src/app/sum/sum.component.html

And so at http://localhost:4200 we should see the contents of the sum component inside the root component like this,