Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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


user
AZIM EBRAHEMI 1 year ago
Angular HTML
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Faizal Author 1 year ago

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 jquery


Note: 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"

]


user
AZIM EBRAHEMI 1 year ago

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(