Check out our Angular Book Series.

Creating a Popup with Bootstrap and Angular

How does one create a modal window with Bootstrap and Angular 4? This post will show you how.

The Setup

First, we need a generic app. You can use the Angular CLI, or my own seed project to create one. They are all going to give you a similar code base, although the directory structure is a bit different. I'm going to continue using the seed project I created, so you may have to make minor tweaks to the setup for other options.

Next be sure to install ng-bootstrap using Node:


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

If using the Angular Quickstart or the DotComIt seed project, you'll have to tell SystemJS how to find it. Open the SystemJS config and add this to the map property:


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

The seed project scripts will need to copy the Bootstrap libraries into the build directory. Just find the angularLibraries array in the config.js file and add the new entry:


'@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

Now open up the index.html file and add the bootstrap CSS:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

Create the Pop Component

Now, let's create a component that will be the popup. Create a file named popup.component.ts in src/com/dotComIt/learnWith/views/popup. First, add your imports:


import {Component} from '@angular/core';
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

This imports the Component so we can create this class as a component. It also imports the NgbActiveModal. This will allow us to close the modal.

Create the @Component metadata:


@Component({
selector: 'Popup',
templateUrl : './com/dotComIt/learnWith/views/popup/popup.component.html',
styleUrls: [ './com/dotComIt/learnWith/views/popup/popup.component.css' ]
})

I named the selector Popup, although we won't need that. I also specified an external HTML template and an external CSS file. I do this as a matter of habit. The CSS file can be empty. We'll roll back to the HTML file in a bit. For now, create the class:


export class PopupComponent {
}

Not much there. Add in a constructor:


constructor(public activeModal: NgbActiveModal) {
}

The constructor will inject an instance of the NgbActiveModal class into this component using Angular's Dependency Injection syntax.

Finally, we'll add two methods. The first is to close the popup:


onClose():void {
this.activeModal.close('closed');
}

Closing the popup usually means the user is done interacting with it and wants to move on to other things.


onDismiss(reason : String):void {
this.activeModal.dismiss(reason);
}

Dismissing the popup means the user is cancelling the operation. Both methods will be referenced inside the HTML template. Overall there is not much to this Angular Component, because I left it simple for sample purposes. It could get as complex as you need it to.

Now look at the popup.component.html file. Start with a header:


<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
<button type="button" class="close" aria-label="Close" (click)="onDismiss('Cross click')">
<span aria-hidden="true">x</span>
</button>
</div>

The header includes a Title and an X button. When the X button is clicked, the onDismiss() method is called. Dismissing the modal is like cancelling it, whereas closing it usually means you are done with it.

Now, add a body:


<div class="modal-body">
Modal Body
</div>

Not much there, just some test text. Finally, add a footer:


<div class="modal-footer">
<button class="btn btn-primary" type="button" (click)="onDismiss('Close click')">Cancel</button>
<button class="btn btn-warning" type="button" (click)="onClose()">Close</button>
</div>

The footer includes two buttons. One is a cancel button which will dismiss the modal. The other is a close button. Both call the related methods inside the component.

That's all we need to create the component that will display inside the modal.

Modify the Main App Component

Open up the app.component.ts file. Modify the template to be like this:


template : '<button (click)="onModalRequest()">Open Modal</button>'

There is a single button which will call an onModalRequest() function. The onModalRequest() function goes in the class body of the AppComponent. But, first be sure that the constructor injects ng-bootstrap's NgbModal


constructor(private modalService: NgbModal) {
}

Now, look at the onModalRequest() method:


onModalRequest():void {
const modalRef = this.modalService.open(PopupComponent );

modalRef.result.then((result) =>
{
console.log(result);
console.log('closed');
}).catch( (result) => {
console.log(result);
console.log('cancelling');
});
}

First, the modalRef is created using the mmodalService.open() method. The PopupComponent is sent in as an argument, so be sure to import it. The modalRef.result is a promise object. If the modal is closed then the result function will be executed. If it is dismissed the failure function will execute. For both of these functions, I'm just outputting the results to the log. /

Modify the app.module

We need to tell the @NgModule about the popup component. First, review the imports:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';
import {PopupComponent} from "../views/popup/popup.component";

The first two imports are from the angular library. The second one comes from the ng-bootstrap library. The final two imports related to our custom code.

Create the NgModule metadata:


@NgModule({
})

I started it empty. First, add the imports:


imports: [
BrowserModule,
NgbModule.forRoot()
],

It loads the BrowserM

Now the declarations:


declarations: [
AppComponent,
PopupComponent
],

The declarations tells the module which of our custom components need to be ready for use.

Next, bootstrap our app's main component:


bootstrap: [ AppComponent ],

Good to go!

And finally, add the PopupComponent the the entryComponents array:


entryComponents: [PopupComponent]

This is important because this is how we tell Angular to allow this component instance to be created on the fly with our code.

Finally, after the metadata, export the component class:


export class AppModule { }

Test It

Now you can test things. Open the app in a browser:

Now, click the Open Modal button:

Click the X or Cancel Button. You should see a message show up in the console:

Open it again, and click the close button:

You are good to go. I wrote this post as a prelude to testing Bootstrap Popups with Angular. Those articles will come over the next few weeks. In the meantime, get my new book series on Angular 4 which uses similar techniques.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Make a two column layout in Bootstrap

Multi-column layouts are a common requirement when building building HTML web sites or applications. In the old days, we would just use an HTML table and be done with it. But, these days using CSS for layout is the preferred approach. Using HTML tables for layout is considered a bad idea. Bootstrap provides an easy way to create a two column layout.

Create the two column layout: The Old Way

If I were using HTML tables to create a two column layout, I'd do something like this:


<table style="width:100%">
<tr>
<td>Label</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Some Other Label</td>
<td><input type="text" placeaholder="second text" /></td>
</tr>
</table>

This is an HTML table with two rows, and two cells in each row. This is simple, but the HTML can get complex if you are nesting tables to get specific layouts. When I started building HTML sites; this was the defacto standard for complex layouts.

Play with this sample!

Nowdays, CSS is considered superior for layout purposes than using lots of nested tables, and Bootstrap is a great framework to help you do that.

Import Bootstrap

The first step is to import the Bootstrap library into your HTML page. Bootstrap is primarily a CSS library, but also has a JavaScript portion. For the purposes of this article, we just need the CSS:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

Now all of the Bootstrap CSS is available to our application.

The Bootstrap Grid System

Bootstrap includes styles for a grid system consisting of rows and up to 12 columns. These are the associated styles:

  • row
  • Col-md-1
  • Col-md-2
  • Col-md-3
  • Col-md-4
  • Col-md-5
  • Col-md-6
  • Col-md-7
  • Col-md-8
  • Col-md-9
  • Col-md-10
  • Col-md-11
  • Col-md-12

The first style, row, is used to dictate a row in the grid. Inside the row; you would use some combination of the column styles to dictate the length of your cell; across a 12 column row. The col-md-1 style would span across a single column. The col-md-6 style would span across 6 columns. The col-md-12 style would spread across 12 columns, or a whole row. When putting together layouts with this approach, I like to make sure the total number of cells matches 12 for each row.

Create the two column layout: With Bootstrap

Bootstrap styles can be used to create a similar layout to the one created earlier, with a table. First, create the Bootstrap row:


<div id="row">
</div>

Inside the row, we can create two separate columns. For the purposes of this article, both will use col-md-6, meaning each column will span 6 cells, totaling 12 cells:


<div class="col-md-6">
Label
</div>
<div class="col-md-6">
<input type="text" />
</div>

The reason for making sure that the total number of columns used is equal to 12 is so that the next row will be placed under the first row; instead of next to it.

We can use the same approach for the second row:


<div id="row">
<div class="col-md-6">
Some Other Label
</div>
<div class="col-md-6">
<input type="text" placeaholder="second text" />
</div>
</div>

Play with the code here

Final Thoughts

The Bootstrap Grid system can be very powerful, especially when dealing with nested layout elements.

How do I find documentation for old versions of UI Bootstrap?

I have been doing a lot of development with AngularJS and Bootstrap. For Bootstrap components, I have been using the UI Bootstrap library. UI Bootstrap is a version of Bootstrap rewritten as Angular directives. It works well, however seems to be in constant flux. Each new version contains changes and reworks and as such different versions are incompatible with each other.

When I start an existing project; I use the most recent version; but I have multiple projects with different clients using the older versions. Upgrading is not usually in the budget. Why would a client want to pay to change something that already works? As such, it is beneficial for me to look at older documentation when making changes; since the most recent documentation is no longer relevant.

So, how do I find the documentation for the older releases?

Just take this URL:

http://angular-ui.github.io/bootstrap/versioned-docs/0.13.3/

Specify the version number you are looking for. Here are a few options:

The site only archives documentation starting with 0.12.0 on, and they are available using a drop down menu in the main nav bar of the UI Bootstrap site.

I used 0.6.0 for my training course on AngularJS. Version 0.8.0 of UI-Bootstrap is the last one to support the Bootstrap 2; all updates after that support 2.3.

If you need these earlier docs; you'll have to check out an earlier version from the repository.

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.