user3740359 user3740359 - 10 months ago 87
TypeScript Question

angular 2 bootstrap datepicker initialization

im using the bootstrap datepiker (http://bootstrap-datepicker.readthedocs.io/en/latest/index.html) in my angular 2 application and have some troubles with initializing.

using the following in my component works, but is not pretty

ngAfterViewInit(): void {
setTimeout(function() {
$('.date').each(function() {
console.log($(this));
$(this).datepicker({
format: 'dd.mm.yyyy',
autoclose: true,
calendarWeeks: true,
language: 'de-DE',
todayHighlight: true
});
});
}, 1000)
}


is there a way without the dirty timeout of 1 second to get this working? If i do not have the timeout, the jQuery selector does not return anything and there is no output in the console.

Answer Source

The problem was that the datepicker was inside an *ngIf directive.

Solution was to use the @ViewChildren with a QueryList and initialize once the querylist changed (subscribe to changes event)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download