Adding Styles to Components

- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/adding-bootstrap

Using Bootstrap

1. Install ngx-bootstrap

npm install ngx-bootstrap --save

2. In the index.html file, include bootstrap styles 4 ( or 3 )

To verify bootstrap is working for us, update the app-header component’s template file to use bootstrap navbar :

On the command-prompt, run the command npm start compile and build the webpack ( it might already be compiling if you had it running on the command prompt from our previous task )

npm start

Check the application on the browser — localhost:4200

Yay! 👏 we got the Bootstrap working for us.

Updating unit test specs

Because we changed the HTML template of the app-header component, our {{title}} is no longer inside <h1> tag but rather now its inside the <a> tag, and thus we have to update our specs slightly to expect the title inside <a> tags:

Update app-header.component.spec.ts as below:

☝️ line #26, we changed the queryselector for the title containing element from h1 to a.navbar-brand as per the new html template of the component.

Make the same change in app.component.spec.ts, and now we should have all our unit tests working good.

To use SASS, Bootstrap themes — read here — https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md

In the next task, we’ll add couple of new components - login and home views for our application, and then we’ll set up routing to navigate to these views.