New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Issues Integrating HTML Components into Angular Version of Metronic 8.3.1


Dear Keenthemes Support,

I recently downloaded Metronic 8.3.1 from ThemeForest and installed the Angular version included in the package. However, I’ve encountered several issues when trying to use components from the HTML documentation within the Angular project.

Specifically:

Components like Select2, Collapse, Accordion, Modals, and general animations do not work when I copy the HTML code directly into the Angular templates.
I attempted to include plugins.bundle.js and plugins.bundle.css by adding them to angular.json, but this caused numerous conflicts. Despite trying to resolve them, new issues kept arising, and ultimately, this approach did not work.
As a workaround, I started installing native Angular plugins. However, the class names and structure often don’t match the HTML components provided in the theme, so I’ve been manually adjusting the CSS for each plugin to visually align with the theme’s design.

My question is:
Is there a more efficient and correct way to integrate these components into the Angular version? Given that this is a premium theme, I expected the Angular version to come with fully functional components and plugins ready for deployment.

Any guidance or best practices you can provide would be greatly appreciated, as manually adjusting each plugin is proving to be extremely time-consuming.

Thank you in advance for your support.

Best regards,
Mauricio Steiguer da Silva Pereira


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi

The HTML version relies on jQuery plugins (like Select2, etc.), which are not compatible with Angular’s framework. Angular manages the DOM differently and does not support jQuery-based plugins natively.

The Angular version of Metronic is designed with Angular-native components. Directly copying jQuery code from the HTML documentation will not work as expected. For the HTML template, it will work with proper styles.

Unfortunately, there may not be a 1:1 match for every component or plugin between the HTML and Angular versions in Metronic 8. Manual CSS adjustments are sometimes necessary if you use third-party Angular plugins.

consider upgrading to Metronic v9, which offers an Angular boilerplate also. You can find the official Angular starter here:

https://github.com/keenthemes/metronic-tailwind-html-integration


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(