Working with ngx-bootstrap modals, pagination, popover, and progress bars in Angular 8

In this article, we’ll be working with several components in ngx-bootstrap library:

1. modals
2. pagination
3. popover
4. progress bars

If you’re completely new to ngx-bootstrap layouts, you can check out these two posts:

• How to prototype Bootstrap layouts with Angular 8, part 1
• How to prototype Bootstrap layouts with Angular 8, part 2

To see what we’ll build, have a look at the completed app in Stackblitz.

1. Adding all the components’ folders and files

Let’s add all the folders and files we’ll need for our components. Inside the app folder, let’s add the following structure of new folders and files:

app/
├── modals/
│   ├── modals.component.html
│   └── modals.component.ts
├── pagination/
│   ├── pagination.component.html
│   └── pagination.component.ts
├── popover/
│   ├── popover.component.html
│   └── popover.component.ts
├── progressbar/
│   ├── progressbar.component.html
│   └── progressbar.component.ts
├── ...

We’ve added a total of 4 new folders and 8 new files.

1. Adding the modal component

Here’s the HTML for modal.component.html file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
 
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

As for the Typescript files, here’s the code for the modal component’s modal.component.ts file:

1
2
3
4
5
6
7
import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-modal-static',
  templateUrl: './modals.component.html'
})
export class DemoModalStaticComponent {}

The code above was copied from the Directive examples section of the ngx-bootstrap modal docs.

Before we can import the DemoModalStaticComponent into the App module (app.module.ts), we need to import the ModalModule from ngx-bootstrap/modal, and add it to the App module’s import array, like this:

// ... code skipped for brevity ...
import { ModalModule } from 'ngx-bootstrap/modal';
// ... code skipped for brevity ...
imports: [ 
  BrowserModule, 
  FormsModule,
  ModalModule.forRoot() 
],

If you get prompted to install the ngx-bootstrap package at this stage, do so. For adding Bootstrap styles via a CDN to Angular 8 on Stackblitz, refer to this post.

Next, we need to use our new component, in the form of a custom HTML tag, inside app.component.html. At the very top of the App Component’s HTML template file, add this code:

<demo-modal-static></demo-modal-static>

Upon save, we’ll get an error:

Template parse errors:
'demo-modal-static' is not a known element:
1. If 'demo-modal-static' is an Angular component, then verify that it is part of this module.

To resolve the error, we’ll add the demo-modal-static element to AppModule’s declarations array, like this:

DemoModalStaticComponent

Once we’ve made all the above changes, our app will look like this, with a fully-working static modal:

Here’s the Github commit for the app at this stage.

Recipe: Adding a new component to an Angular 8 app

Based on what we’ve seen above, we can deduce a generic recipe for adding a new ngx-bootstrap component to our Angular 8 apps:

Add the component’s class and template files:

1. Add a new folder named after the component
2. Add 2 files: <some-name>.component.html and <some-name>.component.ts
3. Add the HTML template code, and the Typescript component code (which exports a class <SomeName>Component)

Optional step:

1. Import a module into AppModule, and add it to AppModule’s imports array

Import the component into the App module, and use it in the App Component’s template:

1. Import the <SomeName>Component into the App module and add it to the declarations array.
2. Use the <some-name> custom HTML tag inside the app.component.html template file.

2. Adding the pagination component

In adding the pagination component, we’ll follow the recipe:

1. We have already added the pagination folder
2. We’ve already added the class and the template file
3. We’ll copy the HTML template and the Typescript class code from this pagination example
4. As described under the usage title for pagination component we’ll import the PaginationModule into the App Module, and add it to the App Module’s imports array.
5. We’ll import the new DemoPaginationPageChangedComponent into the app module, and add it to the declarations array of app.module.ts.
6. Finally we’ll add <demo-pagination-page-changed-event> to app.component.html template file.

Once we’ve save our changes, here’s our app’s updated view:

The current point in our app is saved in a Github commit titled Added a pagination component.

3. Adding the popover component

We’ll follow our recipe again:

1. The folder is already added
2. The files are already added
3. The files’ contents are copied from this popover example
4. The necessary module, PopoverModule, is imported to AppModule and added to its imports array
5. The new component titled DemoPopoverDynamicComponent is imported into AppModule and added to its declarations array.
6. The custom HTML element titled <demo-popover-dynamic> is added to the app.component.html file.

Our app now looks like this:

Our Github commit for this improvement is called Added a popover component

4. Adding the progress bar component

With the progress bar component, we can even further simplify our recipe:

1. Add the folder, the *.component.html, and the *.component.ts file.
2. Copy the class and the template code from a progress bar example in the official docs.
3. Add the module, and list it in imports.
4. Import the new component, and list it in declarations.
5. Use the custom HTML element from the new component’s selector entry where needed.

Our full app code is available here, and our app now looks like this:

With this, we wrap up our article.