question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow for ng-template as input for dropdown component

See original GitHub issue

What 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:open
  • Created 4 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Supamiucommented, Feb 4, 2020

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:

<a nz-dropdown [nzDropdownMenu]="menu" [nzDropDownData]="{itemId: 5}">
    menu with data
    <i nz-icon nzType="down"></i>
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
    <ng-template let-data>
        <ul nz-menu>
            <li nz-menu-item>My item id is: {{data.itemId}}</li>
        </ul>
    </ng-template>
</nz-dropdown-menu>

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.

0reactions
NathanIceSeacommented, Aug 26, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using dropdown as input template within PrimeNG turbotable
Here's a working example: <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex"> <tr> <td ...
Read more >
How to use PrimeNG DropDown with templates and custom ...
The PrimeNG (v9.1.0) DropDown component using templates is only documented with ... <ng-template let-item pTemplate="item"> {{item.value.
Read more >
Templates in Angular DropDownList component - Syncfusion
Value template. The currently selected value that is displayed by default on the DropDownList input element can be customized using the valueTemplate property....
Read more >
ngTemplateOutlet: The secret to customisation - inDepth.dev
Using this component our first client can select their favourite shark. ... ng-template and ngTemplateOutlet enable us to define re-usable ...
Read more >
Supercharge Your Angular Content Projection with ng-template
Content Projection works the same way, allowing one component to “project” ... export class DropdownMenuComponent { @Input() title: string; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found