Cuando activo un modal, ni él ni el fondo del modal se muestran como visibles. Puedo ver en las herramientas de desarrollo que los elementos se crean y se destruyen correctamente cuando hago clic fuera de donde debería mostrarse el modal.

Estoy tratando de replicar el ejemplo que se muestra aquí https://ng-bootstrap.github.io/app/components/modal/demos/basic/plnkr.html

Estoy usando lo siguiente:

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

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

código relevante:

aplicación.módulo.ts:

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

dashsboard.módulo.ts:

 import { NgbDatepickerModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [ ... NgbDatepickerModule, NgbModalModule ], declarations: [ DashboardComponent, ], ... })

tablero.componente.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); }) } }

tablero.componente.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>