In a table where rows are added dinamically, how to make different on-click function for every row in Angular?

Question

I have a table and it's rows are added dinamically.

I have an array in the component.ts file and I use *ngFor on that array, so I get the same number of rows, as elements of array.

Thoses dynamically added rows are clickable. Clicking on the row will act like a dropdown, so another row will appear under it, and clicking on the same row as before, will close that dropdown, it will collapse.

Before the table-rows were added dinamically, I made 10 different row and I had 10 different "collapsed(1-2-3....)" variables, for every click event. Then, dropdowns on every row worked. After adding rows dinamically, the previous solution obviously doesn't work. After clicking on one row, all row do the same way(because I am using one variable).

Can you help me to fix it or tell me how to fix it? :)


    
        
            
                keyboard_arrow_down
            
            
                keyboard_arrow_right
            
        
        
            {{log.time}}
        
        
            {{log.text}}

Clicking on the rows, will change the icon in the first column as well.

Ben · Accepted Answer

You can add a property on your component to store the selected item. And in you HTML, you can expend/collapse row depending on the selected item. And then fill the dropdown row with the selected item's data.

In your component ts:

public selectedLog: any;

In your html:


        {{selectedLog.whateverProperty}}
        
    
        
            
                keyboard_arrow_down
            
            
                keyboard_arrow_right
            
        
        
            {{log.time}}
        
        
            {{log.text}}

EDIT:

Here is the version with dropdown row under the selected row:


        
            {{selectedLog.whateverProperty}}
            
    
            
                
                    keyboard_arrow_down
                
                
                    keyboard_arrow_right
                
            
            
                {{log.time}}
            
            
                {{log.text}}

In a table where rows are added dinamically, how to make different on-click function for every row in Angular?

Answers (1)

Related Questions