How to do it...

Let's perform the following steps to create an event to launch a bootstrap modal:

  1. First, let's add the ng-bootstrap modal template to our /src/app/posts/posts.component.html template. We will bind this template to the local property--#modal--for easy retrieval later. If you included the angular2-fontawesome module from Chapter 2, Enhancing Your User Interface, we will use that for our close button. Otherwise, simply substitute your own close button. The modal component itself exposes a built-in action to close itself.
<ng-template #modal let-c="close">  <div class="modal-header">    <h4 class="modal-title">New Post</h4>    <button type="button" class="close" aria-label="Close" (click)="c()">      <fa [name]="'close'"></fa> </button> ...

Get MEAN Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.