I've integrated the ngbDatepicker into a form as shown below
<ngb-panel>
<ng-template ngbPanelTitle>
<div class="row">
<ui-switch (change)="onChange($event,2)" [checked]="professionalLearningEvent.sportsPractive" size="small"></ui-switch>
<label class="accordianTitle" (click)="onAccordianTitleClick(2)">Will your sports practice be
affected ?</label>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div class="container">
<div class="input-group">
<input class="form-control" [formControl]="control" ngbDatepicker [dayTemplate]="getDayTemplate()" #d="ngbDatepicker" [ngClass]="{ 'is-invalid': isFieldInvalid(control) }">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
<span class="fa fa-calendar"></span>
</button>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
The issue I'm facing is that the datepicker UI is not displaying properly. I have tried to troubleshoot but haven't been successful in finding a solution yet.