Allow for ng-template as input for dropdown component
See original GitHub issueWhat problem does this feature solve?
In my use case, I create lists of items with multiple actions that you can do on them, for this I’m using the dropdown component. However, these dropdowns are always the exact same component with just the item id that’s changing, creating a lot of repetition inside the DOM, leading to bad loading times when there’s hundreds of these items in the screen.
If we could provide the same template, which would be used to create the menu when it’s being opened, then all these menus would be combined into one, making things way lighter for the DOM.
What does the proposed API look like?
An additional input on nz-dropdown component, allowing to pass a ngTemplate instead of a nzDropdownMenu instance. I’m not sure how this translates in terms of code especially because of how it could make the nz-menu reference harder to get, but that’s what I would imagine.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:9 (2 by maintainers)

Top Related StackOverflow Question
I just had an idea about this:
What if we could pass some context to the menu directive itself? This way, it would be easier to create one common menu and have it be updated on the fly when it’s being opened.
Example:
I think it could be done using this trick: https://stackoverflow.com/questions/42878506/angular-2-passing-html-to-ng-content-with-bindings.
This way, the reference isn’t lost and the menu always exists, but its content is not cloned accross several rows if the menu is repeated for each row. Also it makes the menu lazy-loaded and probably more reusable.
Need for different trigger data and lazy loading, when dropdown menu is used for each td in a table the performance drops down rapidly as of current and the content can not be easily tuned