Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Settings Icon not showing options in the card after loop *ngFor


Hello,

I have issue with your template after I loop the records using *ngFor(angular) the setting icon not showing options like(Approve, Reject, Create payment). Please find code and screen shot and advice.

https://drive.google.com/file/d/128Z-bLsLzs1TjXRx9uG7dMwGcCV-rR0t/view?usp=share_link

https://drive.google.com/file/d/1v3CQMK1H-JhfEFP75YmqCzfKVs2pEixT/view?usp=share_link


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


Hi Faqru,

Check for any errors or console warnings: Look for any error messages or warnings in the browser's console that might provide more information about the issue. This can help you identify any specific errors related to the dropdown component or its initialization.

Thanks



Hi Faizal,

Dropdown options not working as expected. No issue in icon.

Thank you



Hi Faqru,

Could you please clarify if the problem is that the icon itself is not showing up, or if the dropdown options are not working as expected?

Thank you, and I look forward to your response.



Hi Faizal,

Thank you for below solution. It doesn't works. I copied html templates into my angular project. all works good. But once I loop Settings Icon not showing options in the card. Please advice.



Hi Faqru,

Sorry for the delay. You can try reinitializing the dropdown menu after the rendering is complete. Here's a suggested solution:

1. Import the MenuComponent class from the Metronic Angular library in your component file:

import { MenuComponent } from "app/_metronic/kt/components/MenuComponent";


2. In your component's code, after the rendering is done (for example, inside the `ngAfterViewInit` lifecycle hook or after the *ngFor loop), call the `reinitialization` method of the MenuComponent:


ngAfterViewInit() {
// Call reinitialization method of MenuComponent
MenuComponent.reinitialization();
}


I hope this helps! Let me know if you have any further questions.

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