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
Post a Comment