Topic: Time Picker not working when dynamically added
mudassir_saifi
premium
asked 3 years ago
Time picker does not work when added dynamically using for loop. So as you can see in the example below when the scheduleList has some items. The scheduleList is dynamically populated with schedules using an action on screen. But when the row is added, the time picker does not work. However if i load the time picker on load and not dynamically in a for loop then it works. Weird behavior, not sure whats wrong. Please help.
<div class="row" *ngFor="let schedule of scheduleList>
<div class="form-group col-xl-2 col-lg-3 col-md-4 col-6">
<div class="md-form md-outline input-with-post-icon timepicker" twelvehour="true">
<input type="text" id="timePicker{{schedule.id}}" class="form-control" placeholder="Select Time">
<i " class="fas fa-clock input-prefix"></i>
</div>
</div>
</div>
Grzegorz Bujański
staff
answered 3 years ago
The Timepicker is initialized when the page is loaded. In your case it is not available until you add items to the array - therefore it does not initialize itself automatically. after adding an element to the array you have to initialize the Timepicker that will show up:
document.getElementById(`timePicker${schedule.id`}).timepicker();
mudassir_saifi premium commented 3 years ago
thanks, i was able to add this instead and fix it. Maybe the official documentation should be updated as well?
$(document).ready(function() {
$('.timepicker').timepicker();
});
Grzegorz Bujański staff commented 3 years ago
The jQuery documentation covers cases related to using MDB without Angular, Ract or Vue frameworks. A special version of MDB has been prepared for these frameworks. This problem is rather specific to Angular. But we will consider it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: Laptop
- Browser: Chrome
- OS: macOS
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
Hi. Unfortunately I am not able to reproduce this problem. I checked it, and it works fine. I just had to remove the quotes which are at the beginning of the tag
i
and add quotes to the end of*ngFor
(it was causing errors). Do you have any bugs in your console? How did you add MDB in Angular? By adding css and js files inangular.json?
mudassir_saifi premium commented 3 years ago
yes i added the mdbootstrap dependencies in angular.json under styles and scripts. Here's the code from my angular.json
Please follow below steps to reproduce the problem.