Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

Assistance Needed for Invoice Integration and Styling in Metronic Angular


Dear Metronic Support,

I am integrating the invoice creation feature from the Metronic HTML template into the Metronic Angular template. Specifically, I aim to replicate the functionality for line item amount and total amount calculations, as demonstrated in the HTML template. Could you guide me on how to achieve this?

Additionally, I encountered an issue with the datepicker. I tried both the native HTML datepicker and the ngbDatepicker, but neither is styled like the datepicker in your HTML online demo. Could you provide recommendations for styling it consistently?

Lastly, I noticed that the main app dev wrapper in the Angular template appears larger than in the HTML demo. How can I adjust its size to match the HTML version?

Thank you for your support.

Best regards,
Abdelmuniem


A
Abdelmuniem Mohamed 5 days ago
Angular Bootstrap HTML
1 Answers
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)

user
Faizal Author1 day ago

Hi Abdelmuniem,

Could you please share a screenshot of the component you’re referring to?

For the datepicker, have you imported the original styles from the plugin into the angular.json styles section? This might resolve the styling.

To update the app dev wrapper size, open the file:

/src/app/_metronic/layout/core/configs/dark-sidebar.config.ts

Find and replace all occurrences of "fluid" with "fixed".

Let us know if you need further assistance!

Thanks


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