When I activate a modal, neither it or the modal background are showing up as visible. I can see in the dev tools that the elements are being created and are being correctly destroyed when I click outside of where the modal should be shown.

I am trying to replicate the example shown here https://ng-bootstrap.github.io/app/components/modal/demos/basic/plnkr.html

I am using the following:

@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25 (https://ng-bootstrap.github.io/#/home)

@angular/common": "4.x"...

relevant code:

app.module.ts:

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

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    ...
    NgbModule.forRoot(),
  ]
...

dashsboard.module.ts:

import { NgbDatepickerModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    ...
    NgbDatepickerModule,
    NgbModalModule
  ],
  declarations: [
    DashboardComponent,
  ],
  ...
})

dashboard.component.ts:

import { NgbDateStruct, NgbModal } from "@ng-bootstrap/ng-bootstrap";

export class DashboardComponent {
  ...
  constructor(_modalService: NgbModal) {...}

  public showModal(content) {
    this._datePickerService.open(content).result.then((result) => {
      Logger.debug('show result:', result);
    }, (reason) => {
      Logger.debug('dismissal reason', reason);
    })
  }
}

dashboard.component.html:

<input placeholder="from" (click)="showModal(content)">

...

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</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">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>