CODEWITHSUNDEEP
htmlcssangulartypescriptangular8
sparsh610
sparsh610

Reputation: 1601

HTML : Create a dropdown in cell of table

I want to create a table in which one of the cell works as dropdown.

Some data data.field is coming from backend. I want to show it at time of rendering.

Now a fList is also coming from backend, so when someone click of the cell it should open that list as dropdown. I added the below code but it is not showing any dropdown.

 <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>

Upvotes: 0

Views: 80

Answers (2)

Pallavi
Pallavi

Reputation: 506

If you want to update the table cell with selected value from 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;
}

Upvotes: 0

Dewanshu
Dewanshu

Reputation: 534

actually you need to loop on dropdown values not dropdown menu in your case dropdown values are <li> try this

<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>

in your .ts file

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

this can be a better approach

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

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

Upvotes: 1

Related Questions