Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Hernan Cantori
130
Dynamic igx-dropdown components
posted

I need to create dynamic drop downs, where the button label that toggles the dropdown, as well as the items come from a web service.

Im unable to make it work. If possible, please provide a working example.

This is what i've tried so far.

<div *ngFor="let rootMenu of rootMenus">

                <button [id]="rootMenu.CodigoMenu" class="button ml-2" style="border: 0; display:flex;" [igxToggleAction]="rootMenu.CodigoMenu"
                    igxDropDownItemNavigation="rootMenu.CodigoMenu">
                    <span>{{rootMenu.Descripcion}}</span>
                    <igx-icon class="ml-2">expand_more</igx-icon>
                </button>

                <igx-drop-down #{{rootMenu.CodigoMenu}} [width]="'250px'">
                    <div class="drop-down__scroll-container">
                        <igx-drop-down-item class="dd-item" style="padding: 0 0.5rem !important;">
                            <igx-icon igxPrefix style="margin: 0 !important;">view_list</igx-icon>
                            <span style="font-size: small !important;">Hi</span>
                        </igx-drop-down-item>
                    </div>
                </igx-drop-down>

            </div>
Error:
Type 'string' is not assignable to type 'IgxDropDownBaseDirective'.

 igxDropDownItemNavigation="rootMenu.CodigoMenu">
Thanks in advance
Parents
No Data
Reply
  • 1500
    Offline posted

    Hello,

    Thank you for posting on our forums.

    The reason why you get this error is because {{ rootMenu.CodigoMenu }} is pointing towards a string in your data. Furthermore, since @ViewChild does not support dynamic parameters, im not really sure you can even do such attribute assignment. Just change it to #dropdown and it should all work as intended.

    Why do you need to assign dynamic values to the elements in html?

    I believe all you need to do is to remove the {{ }} and the sample will run.

    I've created one using the samples from our documentation:

    https://stackblitz.com/edit/github-dropdowns?file=src%2Fapp%2Fdropdown-sample-1%2Fdropdown-sample-1.component.html

    Please let me know if you have further questions.

    Sincerely,

    Tihomir Tonev
    Associate Software Developer
    Infragistics

Children