How to Use Angular Bootstrap?

This tutorial is adapted from Web Age course Comprehensive Angular 8 Programming.

Bootstrap is an open source web GUI toolkit. It has two main aspects:

1. Provide a responsive layout engine. This helps us create web sites that work well in mobile devices and in desktop.

2. Provide a set of widgets. This is by default implemented using jQuery. But the ng-bootstrap project has ported them to Angular.

In this tutorial, we will learn to do both. We will build on top of the book database application we have been building.

Part 1 – Install Bootstrap CSS

1. Download the rest-client foolder from   the C:LabWorkrest-client folder run:

2. From the C:LabWorkrest-client folder run:

npm install bootstrap@4.3.1 –save

2. Open rest-client/src/styles.css

3. Add this line to include bootstrap CSS within styles.css.

@import ‘~bootstrap/dist/css/bootstrap.min.css’;

4. Save changes.

Part 2 – Layout the Pages

__1. Open app.component.html

__2. Wrap the <router-outlet> tag in HTML shown in boldface below. This will layout the page in a grid. All content will go in the center with 8 column width.

<div class="container">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <router-outlet></router-outlet>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>

__3. Save changes.

Part 3 – Use Bootstrap Buttons

__1. Open book-list/book-list.component.html

__2. Add the btn-primary class to the Add a Book button.

<button class="btn-primary" ="['/add-book']">Add a Book</button>

__3. Add the btn-danger class to the DELETE button.

<button class="btn-danger" (click)="deleteBook(book)">DELETE</button>

__4. Save.

Part 4 – Test

__1. Open a command prompt and from C:LabFilesrest-server, start the server:

npm start

__2. Open a command prompt and from C:LabWorkrest–client, run the dev server.

npm start

__3. Open http://localhost:4200/ in the browser.

__4. Make sure that the content is laid out in the center of the page and buttons have colors.

Part 5 – Style the Forms

__1. Open add-book.component.html

__2. Apply the form-control class to every <input> element like this.

<input class="form-control" ... />

__3. Apply the btn-primary class to the button.

<button class="btn-primary" ...>

__4. Save changes.

__5. Make the same changes in edit-book.component.html

__6. Test the forms out.

Part 6 – Use Bootstrap Widget

We will now add tooltip widget to the button. It will look like this.

Bootstrap widgets are available from and Angular module called NgbModule. This is available from the NPM package called @ng-bootstrap/ng-bootstrap which we need to install first.

__1. Open a new command prompt windows and from the C:LabWorkrest-client run:

npm install --save @ng-bootstrap/ng-bootstrap@5.0.0-rc.1

You can ignore warnings about peer dependencies for jQuery and popper. You can also ignore warnings about optional dependencies.

__2. Open app.module.ts

__3. Import the name.

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

__4. Then add the module to the imports list like this.

imports: [
    NgbModule,
    ...
]

__5. Save changes.

__6. Open book-list.component.html

__7. Show tooltip for the DELETE and EDIT buttons like this.

<button ... placement="top" ngbTooltip="Delete the book">DELETE</button>
<button ... placement="top" ngbTooltip="Edit the book">EDIT</button>

__8. Save changes.

__9. Verify that the tool tips show up when you hover your mouse over the buttons.

Part 7 – Add Pagination Support

We will now use the pagination widget to show only 4 books at a time.

__1. Open book-list.component.ts

__2. Add these member variables to the class.

private page = 1; //Current page. Starts with 1
private pageSize = 4;

These variables can be added above the ‘constructor(…)’ line.

__3. Add this method that returns the books for the current page.

getDisplayList() : Book[] {
  return this.books.slice(
    (this.page - 1) * this.pageSize, this.page * this.pageSize)
}

This method can be added just before the “deleteBook’ method.

__4. Save changes.

__5. Open book-list.component.html

__6. Make changes shown in bold face below.

  <div *ngFor="let book of getDisplayList()">
    ...
  </div>
  <ngb-pagination ="books.length"
    ="pageSize" ="page"></ngb-pagination>
</div>

__7. Save changes.

__8. Test the changes. Add a whole bunch of new books. Make sure pagination is working.

Part 8 – Clean up

__1. In the REST Server Application command prompt press ‘CTRL-C’ to stop the server.

__2. Hit Control+C to close the Angular dev server.

__3. Close all open text editors and browser windows.

Part 9 – Review

In this lab you learned how to use a third-party Angular library. You also learned how to apply layout to an Angular application using Bootstrap.