I am unable to view the data in the autocomplete drop-down menu

I'm currently encountering an issue with my autocomplete feature. Whenever I click on the input field, a dropdown menu should appear with all available options to choose from.

However, I am having trouble with the visibility of these fields. I have tried adjusting the z-index and other CSS properties, but nothing seems to be working.

Can anyone suggest a solution for this problem?

DEMO

Code

<div class="form-group" style="padding-top: 10px;">
    <div class="ng-autocomplete auto">
        <ng-autocomplete [data]="countries" [searchKeyword]="keyword" 
         [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate">
        </ng-autocomplete>

        <ng-template #itemTemplate let-item>
            <a [innerHTML]="item.departamento"></a>
        </ng-template>

        <ng-template #notFoundTemplate let-notFound>
            <div [innerHTML]="notFound"></div>
        </ng-template>
    </div>
</div>

https://i.sstatic.net/0L5SG.png

The image displayed shows that the information is present, but unfortunately, it is not visible on the screen. Any suggestions on how to resolve this issue would be greatly appreciated.

Answer №1

When working with the #itemTemplate element, make sure to bind the name property from your JSON data.

You can achieve this by following the example below:

<ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
</ng-template>

View a Working Demo Here

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

The website's responsiveness is not adjusting correctly to different screen widths

When I switch to a responsive website, the background turns red at a width of "285px" even though I have set the max width to "1140px". If I use min-width, the effect doesn't show up until 256/276px. I've tried both max and min width settings, bu ...

I am searching for the RowEnter and RowLeave events in a kendo-grid for Angular 2. Where can I find them

When using an ODATA bound Kendo UI Angular 2 table, I am facing the challenge of needing to save the data that a user edits inline on a per row basis instead of per cell. If only there were RowEnter and RowLeave events available for me to achieve this. Do ...

Personalizing the snippets selection background on Stack Overflow

I'm currently working on designing a custom dark theme for Stack Overflow using Stylish. Everything was going smoothly until I encountered an issue while customizing a particular snippet. I'm having trouble changing the selection color to somethi ...

Enable scrolling for both image and text in landscape mode

In landscape screen orientation, I would like the image and text to be scrollable. I plan to achieve this using a media query with a min-width of 768px and a max-width of 1024px. body{ background: url("/img/prewed.jpeg") no-repeat center ; bac ...

Challenges arise in CSS layout when incorporating PHP code

I have encountered an issue with the navigation bar on my webpage. When I insert the HTML directly into the page, there is no space above it. However, when I include an external HTML file using PHP's include function, a margin appears above the naviga ...

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

The opacity of a Tailwind color appears differently when applied to the background versus the border

When applying the Tailwind color purple-600/50 to both the background and border of an element, they appear as different colors. It seems like the opacity is not consistent across browsers (tested on Firefox and Safari). View it in action here. <img src ...

What could be causing issues with my Angular and Express.js Server-Sent Events implementation?

Objective: Implement Server-Sent Events in Angular App with Express Backend Issue: Client does not receive Server-Sent Events Backend Implementation router.get('/options/:a/:b/:c', async (req, res) => { console.log('options endpoint c ...

Is it possible to increase font sizes without changing the overall height of the text?

In my current project, I am experimenting with a CSS Grid layout featuring 2 rows and 1 column. Within this layout, I have placed a word that dominates the entire view-port by setting its font size to 23rem;. Inspired by this music album cover, I am attemp ...

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected ...

What is the best way to integrate @uirouter in the Angular/sampleapp project?

Having trouble configuring the angular/sampleapp to work with @uirouter. Is the systemjs.config.js file set up incorrectly to include @uirouter? 1) Run npm i -S @uirouter/angular 2) Add the following line to the map section in systemjs.config.js ' ...

Tips for selecting the correct type for an array of Unions with the help of Array.prototype.find

I have the following variations: type First = { kind: 'First', name: string } type Second = { kind: 'Second', title: string } type Combo = First | Second; I am attempting to locate the element of type First in a Combo[], as shown bel ...

Can we programmatically switch to a different mat-tab that is currently active?

Looking to programmatically change the selected mat-tab in a TypeScript file. I came across a solution for md-tab, but I need it for mat-tab. I attempted the suggested solution without success. Here's what I tried: HTML <button class="btn btn- ...

syncfusion export pdf demonstrating the toggle button's current state

Currently, I am using syncfusion for converting my page to PDF format. I have a toggle button that is default set to true. However, regardless of the actual state of the toggle button, it always appears as on (true) when exported to PDF. I attempted to s ...

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

Ways to stop dialog from disappearing in Reactjs

This code snippet demonstrates the implementation of a popup with buttons, where clicking the cancel button triggers a confirmation dialog. To make the popup disappear when clicked outside of it, the following event handling is employed: const popupRef = ...

Error message: In Angular 8 using Jest instead of Jasmine, there is no exported member called 'SpyObj'

I recently made a switch in my Angular CLI project from Karma to Jest by following this helpful tutorial. However, after the transition, I've noticed that some tests are passing while others are failing. One issue I encountered involves declaring a v ...

Just starting to learn jquery and I'm struggling with this code, can someone help?

I am trying to move the .icon element to the right and animate it based on its position().left value. Unfortunately, my code is not working as expected and I can't figure out why. It seems like such a simple task! <script> $("li.menu-item").ho ...

Using React TypeScript to create interactive maps with Highcharts

I'm currently attempting to implement the WorldMap example using TypeScript in Highcharts, but I am encountering difficulties with the series within the Highcharts Options: (Highcharts, Highstock, Highmaps, Gantt) Series options for specific data and ...

Using JSON data in an ArrayBuffer with TypeScript

I am currently struggling with converting the received ArrayBuffer data from a server via Websocket into another format. Below is the WebSocket code snippet: let ws = new WebSocket('wss://api.example.com/websocket'); ws.binaryType = 'arrayb ...