HTML code for adding a dropdown menu inside a table cell

Question

HTML code for adding a dropdown menu inside a table cell

I am trying to set up a table where one cell functions as a dropdown menu.

The data.field is being fetched from the backend and I want it to be displayed during rendering.

Additionally, a fList is also retrieved from the backend. When a user clicks on the cell, it should open the list as a dropdown menu. I have included the code below, but unfortunately, no dropdown menu is appearing.

 <tr class="dropdown" *ngFor="let data of dataList | dataPipe">

     <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
         <ul class="dropdown-menu" *ngFor="let f of fList">
             <li>{{f}}</li>
                    
         </ul>
     </td>
                
 </tr>

html css angular typescript angular8

Answer 1

Answer №1

It's essential to iterate through dropdown values instead of the dropdown menu itself. For your situation, the dropdown values are represented by <li>. Give this a try:

<tr class="dropdown" *ngFor="let data of dataList | dataPipe">

     <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
         <ul class="dropdown-menu">
             <li *ngFor="let f of fList" (click)="checkValue(f)">{{f}}</li>
                    
         </ul>
     </td>
                
 </tr>

Make sure to implement this in your .ts file:

public checkValue(value){
console.log(value);
alert(value);
}

This approach might be more effective:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let f of fList">{{f}}</option>
</select>

onChange(value) {
    console.log(value);
}

Answer 2

It's essential to iterate through dropdown values instead of the dropdown menu itself. For your situation, the dropdown values are represented by <li>. Give this a try:

<tr class="dropdown" *ngFor="let data of dataList | dataPipe">

     <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
         <ul class="dropdown-menu">
             <li *ngFor="let f of fList" (click)="checkValue(f)">{{f}}</li>
                    
         </ul>
     </td>
                
 </tr>

Make sure to implement this in your .ts file:

public checkValue(value){
console.log(value);
alert(value);
}

This approach might be more effective:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let f of fList">{{f}}</option>
</select>

onChange(value) {
    console.log(value);
}

Answer 3

Answer №2

If you're looking to update a table cell with a value selected from a dropdown:

<tr class="dropdown" *ngFor="let data of dataList | dataPipe; let i = index;">

 <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
         <td class="btn btn-primary dropdown-toggle" type="button" data- 
     toggle="dropdown">{{data.field}}
     <ul class="dropdown-menu">
         <li *ngFor="let f of fList" (click)="onSelect(f, i)">{{f}}</li>
                
     </ul>
 </td>

 </td>

onSelect(selectedValue, index){
this.dataList[index].field=selectedValue;
}

Answer 4

If you're looking to update a table cell with a value selected from a dropdown:

<tr class="dropdown" *ngFor="let data of dataList | dataPipe; let i = index;">

 <td class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{data.field}}
         <td class="btn btn-primary dropdown-toggle" type="button" data- 
     toggle="dropdown">{{data.field}}
     <ul class="dropdown-menu">
         <li *ngFor="let f of fList" (click)="onSelect(f, i)">{{f}}</li>
                
     </ul>
 </td>

 </td>

onSelect(selectedValue, index){
this.dataList[index].field=selectedValue;
}

HTML code for adding a dropdown menu inside a table cell

Answer №1

Answer №2

Similar questions

Storing information from a table into LocalStorage

The CSS scrollbar is visible on the screen, but for some reason,

Guide to utilizing props conditionally in a Material UI TextField component

Encountering an error while trying to implement strong typing in a function on a Node API service: 'Unexpected token ":"'

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

Can you explain the significance of the "--" within CSS selectors?

Exploring the Applications of @NgModule

Managing input and output using a collaborative service

HTML5 enables users to pick their preferred font style

AngularJS allows us to easily include the route provider templateUrl path in the view div, making

Exploring the capabilities of google-diff-match-patch within the Angular framework

Implementing a JavaScript file and ensuring W3C compliance

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Arrange the angular datatables in a specific order without displaying the usual user interaction triangles

The RxJs Observer connected to a websocket only triggers for a single subscriber

Modify table cell content based on boolean value - HTML

Ways to add items to an array adjacent to items sharing a common property value

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

When you initiate a prevent default, both the Angular and Bootstrap UI tabs will become active simultaneously

"Unveiling the invisible: Revealing hidden characters in PHP