<div *ngFor = "let recordData of employees.record">
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</table>
</div>
</div>
// **this is Angular code and this is the output this code is working but table header data is repeating after the each iteration.
I used ngFor for iteration the record array (it is in the first photo) loop. I used the ngIf to select the queryName and there are six record will come (it is in the first photo). I want that six record under a one table
**
Just moved structural directives and used ng-container to use ngIf and ngFor
I don't want to add extra element like div or span to apply ngIf and ngFor condition. that's why I used ng-container.
<div>
<div>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<ng-container *ngFor = "let recordData of employees.record">
<ng-container *ngIf = 'recordData.queryName==="style-size-query"'>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
Please try like this
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</div>
</table>
Related
I have two td's under one tr. How can i show the 2nd td in next line.Currently its displaying in same line.I would have to loop the users object and its content multiple times.
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" :key="index">
<td>
{{ user.id}}
</td>
<td>
<table>
<tbody>
<tr v-for="(info,index) in user.demographic" :key="index">
<td>
{{info.name}}
</td>
<td>
{{info.address}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I need something like this:
<tr>
somecode...
</tr *ngIf="some condition">
which of course isn't supported, but is there any way to achieve this behavior?
I have a table, and I want to add rows to it recursively using a component that receives node's list(List), iterates over the nodes, print them and calls itself for each of the children of each node roughly like this:
main.component.html
<table class="table table-bordered">
<thead>
<tr>
<th>node names</th>
</tr>
</thead>
<tbody>
<tr app-rower [nodes]="nodes"></tr>
</tbody>
</table>
rower.component.html:
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr *ngIf="node.hasChildren">
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr *ngIf="!node.hasChildren">
</ng-container>
so a final html would be:
<table>
<thead>
<tr>
<th>node's names</th>
</tr>
</thead>
<tbody>
<tr>
<td>node 1</td>
</tr>
<tr>
<td>node 1's child</td>
</tr>
<tr>
<td>node 1's grandchild</td>
</tr>
<tr>
<td>node 2</td>
</tr>
<tr>
<td>node 2's child</td>
</tr>
</tbody>
</table>
No, that's not supported. A template needs to be valid HTML otherwise Angular won't parse it.
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr>
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr>
</ng-container>
I have a table in which the last column has a clickable arrow to display a nested table underneath.
<table class="table table-hover table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dData of dDatas;>
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span></div>
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</tbody>
</table>
My problem is the inner table comes in the last <td> and the formatting isn't correct. I want to make the inner table to appear in a new row and span over the width of the outer table.
If I understand you correctly, you should utilise <ng-container>. This allows you you include multiple <tr> tags in each iteration of your for loop, giving your inner table a whole row and the ability to span the width of the table.
<ng-container *ngFor="let dData of dDatas>
<tr >
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()">
<span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</ng-container>
<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.
this question may be duplicate but I did not got solution for my requirement.
I need a help to have fixed/freeze header and few first columns for table inside
the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.
My HTML code looks as below.
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<table style="width:100%; height:90%">
<tr>
<td width=3%> </td>
<td>
<table style="width:100%;">
<tr>
<td>Page header</td>
</tr>
<tr><td></td></tr>
</table>
<table style="width:100%; height:90%">
<tr>
<td>
<div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
<table>
<thead ng-repeat="h in dummy| limitTo:1">
<tr>
<th ng-repeat="(key, val) in h">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="h in dummy">
<td ng-repeat="(key, val) in h">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have a very peculiar use case which requires me to use two ng-repeats.
One array is of dates and another contains some date in form of associated array with argument as those dates.
<tbody>
<tr ng-repeat="date in dates">
<!-- <tr ng-repeat="datum in data[date]"> -->
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
<!-- </tr> -->
</tr>
</tbody>
Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?
You can repeat <tbody> and then repeat <tr> within each <tbody>
<tbody ng-repeat="date in dates">
<tr ng-repeat="datum in data[date]">
There are no limits on having more than one <tbody>
Another way
<table>
<tbody>
<tr ng-if="0" ng-repeat-start="date in dates"></tr>
<tr ng-repeat="datum in data[date]">
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</tbody>
</table>
This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.
You can always other tags inside the td.
<tbody>
<tr>
<tr>
<div>here</div>
<p>there</p>
</tr>
</tr>
</tbody>