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

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!

Haris · Answer 1 · 2018-11-13T10:04:59.697

0

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>

edited Nov 13 '18 at 10:04

answered Nov 13 '18 at 08:45

Haris

211
1
2
10

thanks for reply..I already have the count being returned from the backend using aggregate and $group and service layer that gets that count..so i dont need to iterate from the front end i just need to display count on its own column – MoreAngularStuff Nov 13 '18 at 09:04
OK, have you tried to add in display columns? like this – Haris Nov 13 '18 at 09:06
Actually this is how my json looks like [ {type: electronics count: 139}, {type: households count: 400}, ... ] – MoreAngularStuff Nov 13 '18 at 09:17
so, you want to to show this json [ {type: electronics count: 139}, {type: households count: 400}, ... ] as in the table right? – Haris Nov 13 '18 at 09:20
correct..ive modified added details in the question its a bit tricky because count doesnt have a model or schema its an aggregate function that groups a collection and returns count of that specific type.. – MoreAngularStuff Nov 13 '18 at 09:24
what i understand is you are providing the datasource to a table which dont have count attrib right? and you have another array which contains that count attrib against the type – Haris Nov 13 '18 at 09:28
yes two different arrays..one that contains type only and another array that i get after the query and it has the count attrib – MoreAngularStuff Nov 13 '18 at 09:33

score 0 · Answer 2 · answered Nov 13 '18 at 09:33

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>

Haris · Answer 3 · 2018-11-13T11:10:15.263

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>

Currently I can get the count for one specific thing "electronic" " but it repeats the count for electronics on all rows. its not differentiating between electronics and household mat-cell and print out the count on its respective type...will update soon — MoreAngularStuff, Nov 13 '18 at 12:06

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

3 Answers3