Time Picker not working when dynamically added

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 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 in angular.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

"styles": [
          "node_modules/mdbootstrap-pro/css/bootstrap.min.css",
          "node_modules/mdbootstrap-pro/scss/mdb-pro.scss",
          "node_modules/metismenujs/dist/metismenujs.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/mdbootstrap-pro/js/jquery.min.js",
          "node_modules/mdbootstrap-pro/js/popper.min.js",
          "node_modules/mdbootstrap-pro/js/bootstrap.min.js",
          "node_modules/mdbootstrap-pro/js/mdb.min.js"
        ]

Please follow below steps to reproduce the problem.

1. Create a new angular project
2.  Add mdbootstrap-pro jquery dependencies in angular.json
3.  Add the code with time picker in app.component.html
4.  Add a button and add (click)="add()"
5.  Create a add method in the app.component.ts file and add an item into the scheduleList array
6.  The timepicker will now appear because the array has an element
7.  Try to click on the time picker icon. it wont work.
8.  Now refresh the browser. it will work.

<p>yes i added the mdbootstrap dependencies in angular.json under styles and scripts. Here's the code from my angular.json</p>

<pre class="prettyprint"><code>"styles": [
          "node_modules/mdbootstrap-pro/css/bootstrap.min.css",
          "node_modules/mdbootstrap-pro/scss/mdb-pro.scss",
          "node_modules/metismenujs/dist/metismenujs.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/mdbootstrap-pro/js/jquery.min.js",
          "node_modules/mdbootstrap-pro/js/popper.min.js",
          "node_modules/mdbootstrap-pro/js/bootstrap.min.js",
          "node_modules/mdbootstrap-pro/js/mdb.min.js"
        ]
</code></pre>

<p>Please follow below steps to reproduce the problem.</p>

<pre class="prettyprint"><code>1. Create a new angular project
2.  Add mdbootstrap-pro jquery dependencies in angular.json
3.  Add the code with time picker in app.component.html
4.  Add a button and add (click)="add()"
5.  Create a add method in the app.component.ts file and add an item into the scheduleList array
6.  The timepicker will now appear because the array has an element
7.  Try to click on the time picker icon. it wont work.
8.  Now refresh the browser. it will work.
</code></pre>

Please insert min. 15 characters.

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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

mudassir_saifi

Premium support 30Support score
3Questions 1Answers 2Snippets