Number of persons and their mobiles numbers are dynamic. I need to show this in table.
Data can contain any number of pname and mobile numbers.
dataList = [
{
pname: "abc",
numbers: [{mobile1: 123, mobile2: 234}]
},
{
pname: "mno",
numbers: [{mobile1: 125, mobile2: 237}]
}
]
Template
<tr *ngFor="let data of dataList">
<td [attr.rowspan]="data.numbers.lenght">data.pname</td>
<td>data.numbers</td> // Here how do I show all mobile numbers of the person.
</tr>
Expected output is of below code.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<th>Pname</th>
<th>Numbers</th>
</tr>
<tr>
<td rowspan="2">Abc</td>
<td>123</td>
</tr>
<tr>
<td>234</td>
</tr>
<tr>
<td rowspan="2">Mno</td>
<td>125</td>
</tr>
<tr>
<td>237</td>
</tr>
</table>
Problem I am facing is I need to add tr after each run of *ngFor and the number of tr will depend on length of numbers array to make row span.
You can do it like shown below
<table>
<ng-container *ngFor="let data of dataList">
<tr>
<td [attr.rowspan]="data.numbers.length">{{data.pname}}</td>
<td>{{data.numbers[0]}}</td>
</tr>
<ng-container *ngFor="let number of data.numbers; let i= index;">
<tr *ngIf="i!=0">
<td>{{number}}</td>
</tr>
</ng-container>
</ng-container>
</table>
But datalist must be of the following format i.e. numbers must be an array
dataList = [
{
pname: "abc",
numbers: [123, 234]
},
{
pname: "mno",
numbers: [125, 237]
}
]
Simple.
You don't need index and nested ng-container.
<table>
<ng-container *ngFor="let data of dataList">
<tr>
<td [attr.rowspan]="data.numbers.length + 1">{{data.pname}}</td>
</tr>
<tr *ngFor="let number of data.numbers;">
<td>{{number}}</td>
</tr>
</ng-container>
</table>
Working example.
https://stackblitz.com/edit/angular-yrose8?file=src%2Fapp%2Fapp.component.html
it is simple to use two *ngFor and avoid repeat Code by data.numbers[0].
<table>
<ng-container *ngFor="let data of dataList">
<ng-container *ngFor="let number of data.numbers; let i= index;">
<tr>
<td *ngIf="i==0" [attr.rowspan]="data.numbers.length">{{data.pname}}</td>
<td>{{number}}</td>
</tr>
</ng-container>
</ng-container>
</table>
Related
Can I use an ngFor instead of repeating <table> two times?
NB: I thought to combine all the items into objects as items of a single array of mapping(each object contains a variable, label and value) but it does not work for me)
....
this.maxValueTable.push(selectedData.res.maxValue);
this.minValueTable.push(selectedData.res.minValue);
...
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
<table style="width:100%;">
<thead>
<tr>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of minValueTable">
<td> {{ MinValue| numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
</div>
Another way:
<!--create an array directly in the .html: you can also use
a variable in your .ts-->
<table *ngFor="let table of [{head:'Max',data:maxValueTable},
{head:'Max',data:maxValueTable}]
style="width:100%;">
<thead>
<tr>
<!--use table.head-->
<th>{{table.head}}</th>
</tr>
</thead>
<tbody>
<!--see how iterate over table.data-->
<tr *ngFor="let maxValue of table.data">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
If your arrays has the same length and only want a table, iterate over one array ans use the index to get the value of the another one
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<!--see the "let i=index"-->
<tr *ngFor="let maxValue of maxValueTable;let i=index">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
<!--use the "index" "i" to get the element of the another array-->
<td>
{{ minValueTable[i] | numberFormatter: (getUnit() | async)}}
</td>
</tr>
</tbody>
</table>
in this case you can also use map to create a new Array
minMax=this.minValueTable.map((x,index)=>({
min:x,
max:this.maxValueTable[index]
}))
And use {{value.min}} and {{value.max}}
You can create a function that will combine min and max values into an array like that:
mergeIntoArray(maxValue: Array<number>, minValue: Array<number>): IMergedObj[] {
let mergedArray = [];
maxValue.forEach((value, index) => {
let tempObj = {};
tempObj['maxValue'] = value;
tempObj['minValue'] = minValue[index];
mergedArray.push(tempObj);
});
return mergedArray;
}
and call this function like that:
let minAndMax = [];
this.minAndMax = this.mergeIntoArray(this.maxValueTable, this.minValueTable);
after that, use this variable (minAndMax) in your HTML template. This way you do not need to use ngFor twice.
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of minAndMax">
<td>{{ item.maxValue }}</td>
<td>{{ item.minValue }}</td>
</tr>
</tbody>
</table>
Here is the stackblitz link created for you. Hope that might help you.
You can use *ngTemplateOutlet for this case:
<div style="display: flex;">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: maxValueTable, header: 'Max'}"></ng-container>
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: minValueTable, header: 'Min'}"></ng-container>
</div>
<ng-template #tableTemplate let-values, let-header="header">
<table style="width:100%;">
<thead>
<tr>
<th>{{ header }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of values">
<td> {{ value | numberFormatter: (getUnit() | async) }}</td>
</tr>
</tbody>
</table>
</ng-template>
And you will get the same table rendered twice - for Max and Min values.
As you can see, the arguments are passed as a second argument inside ngTemplateOutlet:
context: {$implicit: valuesArgument, header: headerArgument}
Later you could use this template to create infinite amount of tables:
<div *ngFor="let table of tables">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: table.values, header: table.header}"></ng-container>
</div>
Assuming your tables property will look like
export class C {
tables: Table[] = [{header: 'Min', values: [1, 2, 3]}, {header: 'Max', values: [4, 5, 6]}, {header: 'Other', values: [0, -1, -2]}]
}
I have a table that is displaying five rows of N/A when I would like to display just one row.
(HTML)
<ng-container *ngFor="let item of file?.fileConfigurations">
<tr *ngIf="item.file === element.file; else notapplicable">
<td> {{item.filename}} </td>
<td> {{item.day}} </td>
<td> {{item.week}} </td>
<td> {{item.time}} </td>
</tr>
</ng-container>
<ng-template #notapplicable>
<tr>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</ng-template>
How can I just display one row of N/A if the ngIf condition is never met? Basically, it displays N/A repeatedly, for five times, when my ngIf condition is not met. This is because the ngFor loop loops through five file configurations.
I have tried removing ng-template, but then it never displays my N/A placeholder value in the data cell (which I want).
Assuming you have element is available in your ts file, you can pre-check for all file in fileConfigurations matches element.file
in component.ts
file: {fileConfigurations: any[]} = {
fileConfigurations: []
}
element = {
file: 'some data'
}
noFileExists() {
return this.file?.fileConfigurations.every(item => item.file !== this.element.file)
}
if the above condition matches, show single <tr>
in component.html
<ng-container *ngIf="noFileExists(); else fileLoop">
<tr>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
</tr>
</ng-container>
<ng-template #fileLoop>
<ng-container *ngFor="let item of file?.fileConfigurations">
<tr *ngIf="item.file === element.file; else notapplicable">
<td> {{item.filename}} </td>
<td> {{item.day}} </td>
<td> {{item.week}} </td>
<td> {{item.time}} </td>
</tr>
</ng-container>
<ng-template #notapplicable>
<tr>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</ng-template>
</ng-template>
You can create a parent element around the container,
And check if the childElementCount property is equal to 0.
<div #items>
<ng-container *ngFor="let item of file?.fileConfigurations">
<tr *ngIf="item.file === element.file">
<td> {{item.filename}} </td>
<td> {{item.day}} </td>
<td> {{item.week}} </td>
<td> {{item.time}} </td>
</tr>
</ng-container>
</div>
<tr [hidden]="items.childElementCount !== 0">
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
I have a source of data from a service like the following.
this.ateco2007 = [{code: this.anagrafica?.ateco2007?.code, description: this.anagrafica?.ateco2007?.description}]
if(this.anagrafica?.atecoSecondari && this.anagrafica?.atecoSecondari.length > 0) {
let i = 0;
for(let elem of this.anagrafica.atecoSecondari) {
this.atecoSecondari.push({
index: i++,
code: elem.code,
description: elem.description
});
}
...where ateco2007 has got always one elem, instead atecoSecondari can have multiple values. But there is always a pair code/description.
I want to show this data in a table. The first row will always be one row(ateco 2007), the other rows can be multiple.
I want a structure like this:
The first column will be always fix with the label, the second column shows the code and the last the description.
I tried the following, this is almost correct:
But I want to achieve something closer to the following:
As you see, there is a sort of rowspan and in the second and third columns, the rows have borders and are in the same line.
I tried the following code:
<p-table [value]="ateco2007" [autoLayout]="true">
<ng-template pTemplate="body">
<tr>
<td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
<td>{{ateco2007[0]?.code}}</td>
<td class="text-left">{{ateco2007[0]?.description}}</td>
</tr>
<tr>
<td rowspan="atecoSecondari.length" class="font-weight-bold">
{{'cliente.atecoSecondari'|translate}}</td>
<td>
<table>
<tr *ngFor="let elem of atecoSecondari">
<td>{{elem.code}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let elem of atecoSecondari">
<td class="text-left">{{elem.description}}</td>
</tr>
</table>
</td>
</tr>
</ng-template>
But I don't know if it's the best way to build the table.
I solved it in this way
<p-table [value]="ateco2007" [autoLayout]="true">
<ng-template pTemplate="body" let-rowIndex="rowIndex">
<tr>
<td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
<td>{{ateco2007[0]?.code}}</td>
<td class="text-left">{{ateco2007[0]?.description}}</td>
</tr>
<tr *ngFor="let elem of atecoSecondari">
<td *ngIf="rowIndex == elem.index" [attr.rowspan]="atecoSecondari.length" class="font-weight-bold">
{{'cliente.atecoSecondari'|translate}}
</td>
<td>{{elem.code}}</td>
<td class="text-left">{{elem.description}}</td>
</tr>
</ng-template>
</p-table>
I added the rowspan and changed the structure.
I am displaying table data using NgTableParams in angularjs. I was trying to show NO DATA EXISTS in the table when the data is not available or length is zero, but my code doesn't seems to work.
Demo : http://plnkr.co/edit/nEbjQE1NQW7VF8dlZvyy?p=preview
sample code:
<table ng-table="tableParams" class="table" show-filter="true">
<tbody ng-repeat="user in $data">
<tr ng-show="$data.length > 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
<tr ng-show="$data.length === 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
NO DATA FOUND</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
</td>
</tr>
</tbody>
js code:
app.controller('MainCtrl', function($scope, NgTableParams) {
$scope.data1 = [];
console.log(" $scope.data1 length " + $scope.data1.length);
$scope.tableParams = new NgTableParams({}, { dataset: $scope.data1});
});
Tried as below too , but it is not displaying the table header and filter for the columns..
Demo : http://plnkr.co/edit/XAOO5tPALVOkQW9hhJCs?p=preview:
<tbody ng-show="!$data.length">
<tr>
<td>
NO DATA FOUND
</td>
</tr>
</tbody>
<tbody ng-repeat="user in $data">
<tr ng-show="$data.length > 0">
....
</tbody>
There are two issues here
The first one is that your ng-repeat directive is in your tbody this will cause your table body to be rendered for every single element in your array.
The second one is that your "NO DATA FOUND" message is inside of your ng-repeat block, no element will be rendered if $data is empty.
The solution would be to move the ng-repeat from your tbody to the actual element that you want to repeat for every item in your array, in this case, the tr that contains the data to be displayed.
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="user in $data" ng-show="$data.length > 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
<tr ng-show="$data.length === 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
NO DATA FOUND</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'"></td>
</tr>
</tbody>
</table>
Hope it helps!
Seems to be the same requirement like AngularJS "Vertical" ng-repeat but solution doesn't work for *ngFor
I have this object array that I am trying to bind to an HTML table. Its format is something like below:
[
{
"Animal":"Dog",
"Country":"France",
"Food":"Tofu",
"Car":"Nano",
"Language":"TypeScript"
}
]
Now this can simply be formatted in the default HTML horizontal table way like this:
<table>
<tr>
<th>Animal</th>
<th>Country</th>
<th>Food</th>
<th>Car</th>
<th>Language</th>
</tr>
<tr *ngFor="let data of datas">
<td>{{data.Animal}}</td>
<td>{{data.Country}}</td>
<td>{{data.Food}}</td>
<td>{{data.Car}}</td>
<td>{{data.Language}}</td>
</tr>
</table>
This would create table like below(Please ignore the data in the table;its just to give an idea.):
But how would I create a structure like this with dynamic data(kind of a vertical table):
In Component:
this.arrayOfKeys = Object.keys(this.datas[0]);
html:
<table>
<tr *ngFor="let key of arrayOfKeys">
<th>{{key}}</th>
<td *ngFor="let data of datas">
{{data[key]}}
</td>
</tr>
</table>
Use ng-container if You have data structure similar to groups[].items[].name
So, if You want to add row
<table>
<ng-container *ngFor="let group of groups">
<tr>
<td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
<td>{{item.name}}</td>
</tr>
</ng-container>
</table>
Source: https://stackoverflow.com/a/44086855/1840185