title: ng-bootstrap for Angular 2 datepicker does not popup the calendar
body: <p>I cannot get the @ng-bootstrap/ng-bootstrap datepicker to actually show a calendar.  I first tried within my own project, using the plunkr example from the documentation for multiple calendars.  All I got was a small rectangle, about 4 pixels tall and 30 pixels wide, with nothing inside.</p>
  
  <p><a href="https://i.stack.imgur.com/eYFWb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eYFWb.png" alt="enter image description here"></a></p>
  
  <p>I then searched SO and found <a href="https://stackoverflow.com/questions/39653143/angular-2-ng-bootstrap-datepicker-popup/">this example and plunkr</a> and tried it, with the same result.</p>
  
  <p>I generated a totally new Angular app with the Angular 2 CLI, installed the @ng-bootstrap/ng-bootstrap, and added the code from the last plunkr.  This gives even worse results, not even showing the selector button.</p>
  
  <p><a href="https://i.stack.imgur.com/LXsjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LXsjs.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have insight into this?</p>
  
  <p>update: I realized I didn't have font-awesome referenced, so after that my controls look like this and the calender does pop down, but this is not a good look!</p>
  
  <p><a href="https://i.stack.imgur.com/aGFMj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aGFMj.png" alt="enter image description here"></a></p>
  
  <p>Update 2:  Still trying to solve this.  I tried a different library with similar results-- the dropdown does not work.  I believe this is a problem with the dropdowns just not working in nested components.  I've compared all the libraries for the working version with the non-working and they are all the same.  The only difference is that the working one is in a top-level component and the non-working one is in a nested component.</p>
  
  <p>Update 3: Solved.</p>
  
  <p>2 things were involved.
  1 - I had to combine the form-group and input-group classes into one div</p>
  
  <p>2 - there was a TypeScript error in the console for an undefined variable.  I don't know why that would prevent the control from dropping down the calendar, since that variable had nothing to do with the form, but it did.  Once I fixed that, the calendar renders correctly.  </p>
  
  <p>Here's my sample code that works:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {FormControl, FormGroup} from "@angular/forms";
  
  @Component({
    selector: 'app-sub',
    templateUrl: './sub.component.html',
    styleUrls: ['./sub.component.css']
  })
  export class SubComponent implements OnInit {
    thisForm: FormGroup;
  
    constructor() { }
  
    ngOnInit() {
      this.thisForm = new FormGroup({
        dp1: new FormControl('')
      });
    }
  
    onSubmit(){}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;form [formGroup]="thisForm" (ngSubmit)="onSubmit()"&gt;
  
    &lt;div class="form-group input-group"&gt;
      &lt;input class="form-control" placeholder="yyyy-mm-dd" id="dp1" form-control-name="dp1" name="dp1"   ngbDatepicker #d1="ngbDatepicker" required&gt;
      &lt;div class="input-group-addon" (click)="d1.toggle()" &gt;
        &lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button class="btn btn-primary" type="submit" [disabled]="!thisForm.valid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>