New Product!SaaSify - Animated Landing Page Template built with Next.js, Tailwind, Shadcn UI, ReUI & MagicUI Components
Preview SaaSify

Angular Support


Hi,
I've been using Metronic's Angular template for many years but now it seems Metronic has dropped support for Angular.

Is this the case and any existing customers are meant to switch to React?


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 (4)


Hi Darryl Stratford

Thanks for your feedback.

By default Metronic v8 is tightly coupled with Bootstrap and its utility classes, while Metronic v9 is focusing on Tailwind.

We're still supporting Metronic v8 for the long term, but updates are slowing down as more developers move away from Bootstrap. Even Bootstrap itself isn't getting as many updates lately, while Tailwind is becoming more popular for building modern UIs.

If you want a cleaner Angular setup without all the extra features, a good approach is to start with the Metronic HTML version and integrate it into your Angular project yourself. That way, you keep full control over the logic and structure based on your app’s needs.

Composer doesn’t generate full Angular/Tailwind bundles, it’s more about outputting minimal HTML + assets, which you’d still need to adapt.



Hi

May I know which Metronic version are you using? v8 or v9?

For Angular in Metronic v9.2.0, please refer to this docs
http://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular

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

The example project has been upgraded to Angular v19

Thanks



Hi Faizal,
I'm using v8 and this is where I'm at ...
I have an enterprise app built with Angular 17. This app has a long life span with lots of development to come so I want to future-proof as much as possible.
I'd like to be able to leverage new versions of Metronic but I will be sticking with Angular. I'd also like to switch to Tailwind in place of Bootstrap and wondering if that is an option.
I'd also like to be able to remove a lot of unecessary code from the Metronic template but that's is proving tricky when it's so embedded.
I see the Metronic Composer but not exactly sure what that does. Perhaps that would allow me to built a template up using Angular and Tailwind rather than trimming a demo project down.

Oh, and ...
The FAQ section on this page doesn't seem to work?
https://keenthemes.com/metronic/tailwind/docs/composer



I didn't word that very well. I guess a better question is ...

Will Keenthemes be supporting versions of Angular beyond 17?


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  :(