how to genrate a table in angular 2 -


i creating table in angular, how can generate new row in table different data, example doing code in pure js. able generate new row on calling of addrow() method. new angular , realise not angular way.can please how can achieve same in angular. fine stuck because realise can not create button in row row.insertcell(5).innerhtml= '<button (click)="deletefunc()">click</button>'; not working.

addrow(){       let table = document.getelementbyid("tabledata");       let rowcount = table.rows.length;       let row = table.insertrow(rowcount);              row.insertcell(0).innerhtml= rowcount;       row.insertcell(1).innerhtml= this.qty;       row.insertcell(2).innerhtml= this.log;       row.insertcell(3).innerhtml= this.kw;       row.insertcell(4).innerhtml= this.frame;       row.insertcell(5).innerhtml= '<button (click)="deletefunc()">click</button>';       }
<table id="tabledata" border="1" >    <tr>      <th>s.no.</th>      <th>qty</th>      <th>type refrence</th>      <th>kw rating</th>      <th>frame size</th>      <th>operation</th>    </tr>  </table>

this easier in angular. have store data in array. can iterate on via *ngfor.

ts:

rows: = [{     number: 0,     qty: 'somevalue',     log: 'somevalue',     kw: 'somevalue',     frame: 'somevalue' },{     number: 1,     qty: 'somevalue2',     log: 'somevalue2',     kw: 'somevalue2',     frame: 'somevalue2' }]; 

template:

<table id="tabledata" border="1" >   <tr>     <th>s.no.</th>     <th>qty</th>     <th>type refrence</th>     <th>kw rating</th>     <th>frame size</th>     <th>operation</th>   </tr>   <tr *ngfor="let row of rows">     <td>{{row.number}}</td>     <td>{{row.qty}}</td>     <td>{{row.log}}</td>     <td>{{row.kw}}</td>     <td>{{row.frame}}</td>     <td><button (click)="deletefunc()">click</button></td>   </tr> </table> 

Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -