Using HTML Select2 and Date Picker in Angular Template
Hello Dear,
I used the HTML Select2 and Date picker from below links in my angular application<img src="" />
https://preview.keenthemes.com/html/metronic/docs/forms/select2
https://preview.keenthemes.com/html/metronic/docs/forms/tempus-dominus-datepicker
but it is not showing properly also search functionality is not working in select2 and date picker functionality is also not working. as I know the necessary libraries are not loaded properly therefore it is not working. Where we can fine the appropriate libraries and css file and where to put them.
as an example I used select2 from html demo from where to find the related file and into where to put the file in our angular project
Need your prompt support in this regard
Replies (2)
Hi
You can install select2 and tempus-dominus directly from npm.
Run these commands in your Angular project directory:
npm install select2 tempusdominus-bootstrap-4 jqueryNote: jquery is required by Select2.
To make sure the styles are loaded globally, add the CSS files to your angular.json file under "styles":
"styles": [
"node_modules/select2/dist/css/select2.min.css",
"node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css",
"src/styles.css"
],Add the JavaScript libraries in the "scripts" section:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/select2/dist/js/select2.min.js",
"node_modules/moment/min/moment.min.js",
"node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"
]Hello Dear Faizal,
Thanks for your reply, I followed the guide you mentioned select2 is working but date picker is not working. also select2 is not getting the styles from metronic. is there proper guideline exist for customizing metronic for angular and using html elements in angular to describe all steps
