Ngx-bootstrap: Problems using bsDaterangepicker

[herreros]

Hello valor-team,

I'm facing some problems using the new bsDaterangepicker. I followed all steps and the example code didn't work. The error message is:

Uncaught Error: Template parse errors:
'bs-daterangepicker' is not a known element:
1. If 'bs-daterangepicker' is an Angular component, then verify that it is part of this module.
2. If 'bs-daterangepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("ock">
  <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker popup</button>
  [ERROR ->]<bs-daterangepicker #drp  placement="right" style="display: block"></bs-daterangepicker>
</span>

Any advice? Thanks in advance.

EDIT: More information.

Code inside XXX.component.html

<pre>{{bsRangeValue}}</pre>
<input type="text"
       value="{{ bsRangeValue[0] | date:'yMd'}} - {{ bsRangeValue[1] | date:'yMd'}}"
       bsDaterangepicker [(bsValue)]="bsRangeValue">
<span style="display: inline-block">
  <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker popup</button>
  <bs-daterangepicker #drp [(bsValue)]="bsRangeValue" placement="right" style="display: block"></bs-daterangepicker>
</span>

Code inside XXX.component.ts

@Component({
  selector: 'XXX',
  templateUrl: './XXX.component.html',
  styleUrls: ['./XXX.component.css']
})
export class XXXComponent implements OnInit {
.
.

  private bsValue: any;
  private bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];

.
.

And imported in app.module.ts

.
.
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
.
.
 imports: [
.
.
    DatepickerModule.forRoot(),
.
.
],
.
.

[nbtd]

I have same issue too.

[xorost]

You can import it like this

import { BsDatepickerModule } from "ngx-bootstrap";
...
 imports: [
    BsDatepickerModule.forRoot(),
]
...

[valorkin]

@xorost one note, better to import form subfolders
like ngx-bootstrap/datepicker
this reduces build time
not available with system.js

[pstepinski]

Hello, I have a problem with import suggested by @xorost

My import:
import { BsDatepickerModule } from "ngx-bootstrap";

Error:
Module '"/.../node_modules/ngx-bootstrap/index"' has no exported member 'BsDatepickerModule'.

In package.json:
"dependencies": { ... "ngx-bootstrap": "1.9.1", ... }