Having trouble with the Ng multiselect dropdown displaying empty options?

I'm currently facing a challenge in adding a multiselect dropdown feature to my project. Below is the code I have been working on:

HTML

<ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple>
</ng-multiselect-dropdown>

TS

dummyList = [
    { item_id: 1, item_text: 'Mumbai' },
    { item_id: 2, item_text: 'Bangaluru' },
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' },
    { item_id: 5, item_text: 'New Delhi' }
]

searchSettings: TslMultiSelectSettings = {
    enableSearchFilter: true,
    noDataLabel: 'Search For status',
    labelKey: 'status',
    primaryKey: 'status'
}

The dropdown is successfully generating with the correct number of items. However, it is appearing blank and I am unable to identify the reason behind this issue. Please refer to the image below for visual representation:

Upon inspecting the element using devtools, I can confirm that the option names are present:

I am seeking guidance on what might be causing the text not to display and how I could potentially resolve this problem.

javascripthtmlcssangulartypescript

Answer №1

Take a look at the documentation, which states the required format as: 

{ id: number|string, text: string }
.

Latest Update

If you are indeed using the same library I mentioned earlier, here's an example of how to use it:

dummyList = [
    { id: 1, text: 'Mumbai' },
    { id: 2, text: 'Bangaluru' },
    { id: 3, text: 'Pune' },
    { id: 4, text: 'Navsari' },
    { id: 5, text: 'New Delhi' }
]

<ng-multiselect-dropdown [data]="dummyList"></ng-multiselect-dropdown>

I'm unsure where you found the following interface, as it doesn't match the library I initially referenced. Please clarify which npm package you are utilizing for this setup.

searchSettings: TslMultiSelectSettings = {
    enableSearchFilter: true,
    noDataLabel: 'Search For status',
    labelKey: 'status',
    primaryKey: 'status'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with react-router-dom loader defer type issue

I attempted to troubleshoot the issue with data loading by incorporating defer in the loader function. I am unsure how to specify the postResponse type, which represents the actual response data. Even after experimenting with type casting and other m ...

reactjstypescriptreact-router-domloader

The process of passing $refs in Vue explained

I have a feature where all the data is passed to the child component. Currently, I am able to pass $attrs and $listeners successfully: <template> <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition"> <slot /> ...

javascriptvue.js

Exploration into the Working Environments of JavaScript and Python

After executing JavaScript code (shown in the top-half) on link1 and python code (shown in the bottom-half) on link2, the diagram below was generated. My inquiry: I noticed that names foo & bar are already present in the global frame (highlighted in ...

javascriptpython

Using [(ngModel)] in Angular does not capture changes made to input values by JavaScript

I have developed a custom input called formControl, which requires me to fetch and set its value using [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCE ...

javascriptjqueryangulartypescriptangular-directive

When using jQuery, the script will execute successfully only when running it chunk by chunk in the console, rather than running the

As I tidy up an html page, my main task is to remove anchor tags and keep the text nodes. To achieve this, I am enclosing all text nodes (without any surrounding elements) within the <asdf> tag. Additionally, I am deleting empty elements such as < ...

javascriptjquery

Is the CSS and jQuery plugin combination blocking the AJAX call or event listener from functioning properly?

After finally getting superfish to work, I encountered a problem where an ajax call would not trigger due to the event listener being prevented. By commenting out the plugin initialization, the event fired but with incorrect data. Any insights on why this ...

phpjavascriptjqueryhtmlcss

Creating custom validation in Vuetify for password confirmation is essential in ensuring that

While developing a Vue.js template, I encountered a scenario on the sign-up page where I needed to compare passwords during user registration. To achieve this, I implemented a custom validation rule in the code snippet below: <v-text-field label=" ...

javascriptvalidationvue.jsvuetify.js

Color key in square shape for graph legend

I am looking for legend colors in square shape, but I don't want them to appear as square boxes on the graph. https://i.stack.imgur.com/Of0AM.png The squares are also showing up on the graph, which is not what I want. https://i.stack.imgur.com/Az9G ...

javascripttypescripthighchartsangular-highcharts

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

When using the fetch function, I encountered an error with the "fetchUrl" argument: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'RequestInfo'. This is the code snippet where the error occurred: ...

javascripttypescriptfetch-api

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Ways to Retrieve HTML Snippet from Handler Request and Load it into a String

I'm encountering an issue with my ASP.NET MVC application. I'm attempting to retrieve the following HTML snippet from a Handler in a separate ASP.NET project, within one of my controllers, in order to display it in a View: <br /> <div i ...

htmlasp.net-mvccode-snippets

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

Pattern Update Method: Iteratively updating each individual node

I'm struggling to grasp the concept of updating only those d3 nodes where the data has changed. Despite my efforts, I still can't seem to get it right. In the test example provided below, I am noticing that everything is being updated instead of ...

javascriptd3.js

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

What is the best way to send props (or a comparable value) to the {children} component within RootLayout when using the app router in Next.js

As I work on updating an e-commerce website's shopping cart to Next.js 13+, I refer back to an old tutorial for guidance. In the previous version of the tutorial, the _app.ts file utilized page routing with the following code snippet: return ( < ...

reactjstypescriptnext.js

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

phphtmlforms

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating virtual hover effects on Android browsers for touch events

My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...

javascriptandroidjquerycss

How can we stop the constant fluctuation of the last number on a number input field with a maxLength restriction

In my ReactJS code, I have an input field that looks like this: <input type="number" onKeyPress={handleKeyPress} maxLength={3} min="0" max="999" step=".1" onPaste={handlePaste} /> Below are the functions associated w ...

javascripthtmlreactjsinput