There is no directive with "exportAs" set to "ngbDatepicker"

Question

I'm using angular 4, i was trying to add datepicker while i'm using datepicker-popup.html I'm getting error as given below. I'm not getting what kind of error it is. please help me out.

datepicker-popup.html

<form class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
                </button>
            </div>
        </div>
    </div>
</form>

<hr/>
<pre>Model: {{ model | json }}</pre>

Answer 1

Please add these two lines in your file.

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

and import the NgbModule.

imports: [NgbModule]

Answer 2

I found this solution:

In HTML:

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="dp" ngbDatepicker>

In TS:

@ViewChild('NgbdDatepicker') d: NgbDateStruct;