Angular 6 doesn't work with Bootstrap 3 Datepicker

Question

I'm developing an Angular 6 application. I'm starting to create a component with a simple datepicker. I am obliged to use this plugin: https://eonasdan.github.io/bootstrap-datetimepicker/

Even if in the file "angular.json" I put the right dependencies .css and .js ( the css works perfectly; these are the scripts .js):

            "scripts": [
          "src/jquery/jquery-3.1.1.min.js",
          "src/bootstrap/js/bootstrap.min.js",
          "src/bootstrap-datetimepicker/js/moment.min.js",
          "src/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"            
        ].

My template html of my component is this:

<div class="form-group">
<label>Date</label>
<div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control field-8">
    <span class="input-group-addon">
        <span>today</span>
    </span>
</div>
</div>

<script type="text/javascript">
   $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
</script>

But if I click on the button the datepicker doesn't appear! (with a normal html page, everything works perfectly!). How can I resolve this problem? Thanks!

Answer 1

I prefer, please do not use JQuery element with Angular 2+, you can find same plugins/component for Angular 2+. If you want to continue with this, add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); in ngAfterViewInit method in component.ts file.

If it will not work then add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); with in timeout.

ngAfterViewInit will execute once View part is loaded in Angular 2+. I am using Primeng components in my project.