How to feed data to mat-cell based off of data from a different mat-cell - angular5

Question

I have a mat-table that renders data dynamically like this:
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="count">
<mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.count}} </mat-cell>
</ng-container>
I dont have count in the model i am querying the number of items from the back end and returning the count by grouping how many each type has using aggregate function and $group. the types (electronics, households...) are in the collection
..
[{_id: objectId type: electronics}
{_id: objectId type: households}
]
after aggregate and grouping query i get this array back
[
{type: electronics count: 139},
{type: households count: 400},
...
]
I want to add a count column that counts the number of different items where electronics will be its own row and return 139 in the count column and household its own row and return 400
I am successfully in logging the data returned from the backend but how do i display it on mat table.
Using angular 5 material how do I iterate through the mat-cell and grab each type (electronic, households from a different cell) and display the count for that type on its respective row? any suggestion would be appreciated!

Answer 1

If you have this array on your component and want to show this on table.
let mydata = [
{type: electronics count: 139},
{type: households count: 400},
...
]
and in your template you have
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="items">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="count">
<mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.count}} </mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: ['type','count'];">
</tr>
</table>

Answer 2

you can save your data returning into your component and then you can write a function to get a count of given item from the component like.
component
import { Component } from '#angular/core';
#Component({
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent {
result : any[];
constructor() { }
getCount(itemName){
let count = 0;
for(var i = 0; i < result.length; i++){
if(result[i].itemName===itemName){
count++;
}
}
return count;
}
}
on Table you can have
<ng-container matColumnDef="items">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.items}} </mat-cell>
</ng-container>
<ng-container matColumnDef="count">
<mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
<mat-cell *matCellDef="let element"> {{getCount(element.itemName)}} </mat-cell>
</ng-container>

Answer 3

ok. you have two different arrays
export interface myData {
elements: any[];
}
#Component({
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent {
displayedColumns: string[] = ['type','count'];
dataSource : myData[] = [];
arrayThatcontainsCount = [];
someFunction(){
this.someService.get().then((result: any) =>{
this.dataSource = result.data;
}
}
someFunction(){
//getting count array from api and setting array "arrayThatcontainsCount"
}
getCountOfElement(type){
let elem = this.arrayThatcontainsCount.find((r)=> r.type == type);
return elem.count;
}
}
and in html
<ng-container matColumnDef="items">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="count">
<mat-header-cell *matHeaderCellDef> Count </mat-header-cell>
<mat-cell *matCellDef="let element"> {{getCountOfElement(element.type)}} </mat-cell>
</ng-container>