Our component template is not only responsible for supplying our view with the content to be displayed in the modal dialog, but will also supply us with the visual element that our users will use (in this case, a button) to trigger the modal dialog. 

The following HTML code is our component template, which we will use later for our login form (note: we will be covering forms in Chapter 10, Working with Forms):

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Log In</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <input id="username" class="form-control" placeholder="username" >
        <br>
        <input id="password" type="password" class="form-control" placeholder="password" >
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">submit</button>
  </div>
</ng-template>
 
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch test modal</button>

Now that we have our component class and our component template, we have to tell our application's root module about them—and we'll do just that in the next section.