Auto-complete custom template with link

Posted by: abigail.miller on 3 August 2022, 7:49 am EST

  • Posted 3 August 2022, 7:49 am EST

    Hi, we are using the multi-select auto-complete component, and would like to include a “view details” link in the custom template that displays the drop down items. We’d like for the user to be able to click the link (opened in a separate tab) without triggering selection of the item. Is there a way to designate only part of a template as the selection handler?

    Example-allow user to click “View Details” without selecting “hypothalamus”:

    <ng-template wjItemTemplate>
            <div class="item">
              <b>hypothalamus</b><br />
              (OBI)
            </div>
            <a href="http://purl.obolibrary.org/obo/EMAPA_17536" target="_blank">View Details</a>
          </ng-template>
    
    

    Thanks in advance for any help with this.

  • Posted 4 August 2022, 3:23 pm EST

    Hello,

    As per our understanding you want to show an additional item at the bottom of the dropdown list on which item you want to prevent selection and clicking the item opens a new tab with the given URL, if so then you may refer to the sample link below demonstrating a similar approach and let us know if that’s works for you:

    https://stackblitz.com/edit/angular-mpc75g?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels