Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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.




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 (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';
  1. 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
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  :(