Why is there empty white space showing in the select option drop down, even though the data is being bound correctly

When creating a dynamic dropdown on Angular 7 at runtime, I am facing an issue where there is whitespace visible in the select options. Despite correctly binding and filling the data, this white space persists. How can I remove this blank area when binding data?

Below is the dynamically created dropdown with a name and filled values:

<div class="form-group" style="display: flex; align-items: center;margin-top:10px;margin-left:20px;">  
         <div *ngFor="let fil of FilterList" style="padding-bottom: 10px;margin-right: 10px;">  
           {{fil.controlName | slice:3:15}}     
           <Select id="{{fil.controlName}}" (change)="onChange($event)" class="form-control"  
             style="width:200px; margin-right:10px;" >  



             <option value="0">-Select-</option>  

             <option *ngFor="let fil2 of this.FilterBinddata" >  
               <div *ngIf="fil.controlName===fil2.filterName ">  
                 {{fil2.reportSource}}  
               </div>  
             </option>  




           </Select>  

           <div>  
           </div>  

         </div>  

       </div>

Here is a visual representation of my issue: Click here

Result of discussion: View image

javascriptangularjstypescriptangular7angular-components

Answer №1

Ensure that your condition returns true to avoid creating blank options in your select dropdown. To improve this, consider using an ng-container before the select element and apply *ngFor on it with the filterBinddata array. Also, set the *ngIf directive directly on the option tag to populate only relevant options.

Here's an example of how you can implement this:

<div class="form-group" style="display: flex; align-items: center;margin-top:10px;margin-left:20px;">
  <div style="padding-bottom: 10px;margin-right: 10px;">
    {{fil.controlName | slice:3:15}}
    <div *ngFor="let fil of FilterList">
      <Select id="{{fil.controlName}}" (change)="onChange($event)" class="form-control"
        style="width:200px; margin-right:10px;">
        <option value="0">-Select-</option>
        <ng-container *ngFor="let fil2 of FilterBinddata">
          <option *ngIf="fil.controlName===fil2.filterName">
            {{fil2.reportSource}}
          </option>
        </ng-container>
      </Select>
    </div>
    <div>
    </div>
  </div>
</div>

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

Tips for modifying JSON response using a function

When I call the function buildFileTree, I store its response in a constant variable called data. const data = this.buildFileTree(dataObject, 0); The value of dataObject is: const dataObject = JSON.parse(TREE_DATA); And the content of TREE_DATA is: cons ...

javascriptarraysangulartypescriptangular-material

Tips for resolving the [vue/no-use-v-if-with-v-for] warning in Vue

I am encountering an issue with a div element that supports v-for and v-if. The output is correct, however, there is a warning that I find quite annoying: [vue/no-use-v-if-with-v-for] The 'prit_type_ids' variable inside the 'v-for' dir ...

javascriptvue.jsfrontendbackendvue-cli-3

Run the .map() method at regular intervals of 'x' seconds

I have a certain function in mind: function fetchDesign (items) { items.map(item => item.classList.add('selected')) // additional code here } Is there a way to trigger item.classList.add('selected') every 2 seconds, while ensu ...

javascript

Guide to swapping out embedded objects within a TypeScript data structure

I am in need of modifying a TypeScript object by conducting a key search. It is important to note that the key may be repeated within the object, so I must ensure it belongs to the correct branch before making modifications to the corresponding object. To ...

typescript

Retrieve JSON and HTML in an AJAX request

I have multiple pages that heavily rely on JavaScript, particularly for sorting and filtering datasets. These pages typically display a list of intricate items, usually rendered as <li> elements with HTML content. Users can delete, edit, or add item ...

javascriptajaxjsonoptimization

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

Unable to utilize npm modules in commonjs using rollup: encountering the error "require is not defined"

I am currently working on an ES6 project where I use rollup and babel for transpilation. Everything is running smoothly, except when trying to import npm modules that utilize commonjs syntax (specifically using require('something')), I encounter ...

javascriptnode.jsecmascript-6commonjsrollup

Using the .forEach method in JavaScript to convert JSON properties into HTML content

For my project, the JSON data is stored in the variable this.responseText: { 'nav': '<a href="">a</a><a href="">b</a>', 'content': '<div>tartalom</div>', ...

javascriptjsonloopsforeach

What is the best way to verify the presence of # in a URL?

Every now and then, due to caching issues, I find myself adding a # to my URL, like so: http://www.example.com/#lang=3201954253 My goal is to find and remove the #lang from the URL if it is present. ...

javascriptjqueryurl

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

In my ionic application, I developed a custom directive specifically for text masking, aimed at formatting phone numbers within input fields. The core functionality of this directive revolves around utilizing ngControl to facilitate the retrieval and assig ...

javascriptangularunit-testingionic2testbed

Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page. Currently, I only ...

javascriptjqueryhtmlcsscookies

What could be causing the "10 $digest error" to appear in my code?

My goal was to create a basic app that could detect the size of the browser and display it. But, I encountered an error message saying "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!" app.controller('AppCtrl',function($win ...

javascriptangularjs

The occurrence of an error event in events.js at line 160 has not been properly handled and has resulted in an exception being

I recently encountered an issue with a project I was working on that was built using gulp. After updating the node version to v6.3.1, a task named 'html' started throwing an error. Here is a snippet of the error code: bogon:toClient work$ gulp ...

javascriptnode.jsgulpnode-modulesgulp-load-plugins

Issues arising with Intersection Observer in vue.js

Recently, I started using IntersectionObserver for the first time and I found a helpful guide at . However, I encountered an error that is causing me some trouble. [Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserv ...

javascriptvue.jsvue-componentintersection-observer

Refresh the dataTable following the form submission within the colorbox

On my page test.php, I am using jQuery DataTables to fetch data. There is a button labeled "Add Note" that opens an ajax form inside colorbox. The form submission process is functioning correctly, but I am looking for a way to refresh the DataTables when a ...

javascriptjqueryajaxdatatablescolorbox

Launching a modal in a new browser window with the help of JavaScript or PHP

I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...

javascriptphpjqueryhtmlcodeigniter

Having difficulty showing custom events on angular full calendar

After pushing events loaded from the server, I am encountering an issue where they are not being displayed on the calendar. Interestingly, the events are in the correct format and can be seen when printed on the page, but for some reason, they do not show ...

javascriptangularjscalendarfullcalendar

The functionality of Alpinejs seems to be limited to Sidebar Menu and not functional for Modal use

I am currently in the process of developing a website using Laravel, tailwind css and alpinejs. The mobile version features an offcanvas sidebar for navigation and a modal window for the shopping cart. While the responsive mobile menu is functioning proper ...

javascriptphplaraveltailwind-cssalpine.js

AngularJS: mouse events not being received by multiple directives on one page

Within my Angular application, I have a group of intricate D3 directives that are all included in a single view. Originally, each directive was placed on separate views with various content, and they functioned as expected in that setup. However, it was de ...

angularjseventsd3.jsscopedirective

The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

Having some trouble using functions from Observable Plot example with a marimekko chart in my TypeScript project. I encountered an error on this particular line: setXz(I.map((i) => sum.get(X[i]))) The code snippet causing the issue is as follows: fu ...

javascripttypescript