Sum of groupBy elements using PipeTransform - asp.net

Question

I did a groupBy in an Angular project and in back-end, using ASP.NET Web Api to retrieve data for the groupBy functionality. I used this link to make it work - Angular groupBy that uses PipeTransform interface for the implementation. It works fine and the current output is as follows right now:
Jack
ID - Date - Points
1001 - 04/01/2020 - 10
1001 - 05/01/2020 - 10
John
ID - Date - Points
1002 - 04/01/2020 - 10
1002 - 05/01/2020 - 20
So the following is the data structure:
data = [
{ "id": "1001", "name": "Jack", "date": "2020-01 - 05T00: 00: 00", "points": 10 },
{ "id": "1001", "name": "Jack", "date": "2020-01 - 04T00: 00: 00", "points": 10 },
{ "id": "1002", "name": "John", "date": "2020-01 - 05T00: 00: 00", "points": 20 },
{ "id": "1002", "name": "John", "date": "2020-01 - 04T00: 00: 00", "points": 10 }
];
In the front-end, I did this to render the view:
<div class="col-xs-12 table-responsive">
<table *ngIf="data" class="table table-responsive" border="0">
<tbody *ngFor="let details of data | groupBy: 'name'">
<tr>
<th colspan="2">
<h2>{{details.key}}</h2> <!--Here name is shown-->
</th>
</tr>
<tr>
<th>Sl No.</th>
<th>Id</th>
<th>Name</th>
<th>Date</th>
<th>Points</th>
</tr>
<tr *ngFor="let value of details.value; let i = index">
<td>{{i + 1}}</td>
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>{{value.date | date :'dd-MMM-yyyy'}}</td>
<td>{{value.points}}</td>
</tr>
<tr>Total Points: {{sum}}</tr> <!--Expecting total points for groupBy-->
</tbody>
</table>
</div>
My expected output is as follows:
Jack
ID - Date - Points
1001 - 04/01/2020 - 10
1001 - 05/01/2020 - 10
______________________________
Total Points: 20
John
ID - Date - Points
1002 - 04/01/2020 - 10
1002 - 05/01/2020 - 20
______________________________
Total Points: 30
I am new to stackblitz and unable to build the project to render. Here is the link that I tried with the code - Angular groupBy with stackblitz
N.B: I tried to do the sum in the TypeScript file like this but this does total calculation of the points, not groupBy:
public sum: number = 0;
GetUserPoints() {
debugger;
for (let i = 0; i <= this.data.length; i++) {
this.sum += this.data[i].points;
console.log(this.data.length);
}
}

Answer 1

if you want to keep this dynamic and reusable by using pipes, you could achieve calculating the sum of points by creating a PluckPipe and SumPipe like i did in this stackblitz
Then just use <tr>Total Points: {{details.value | pluck:'points' | sum}}</tr> in your template
example: https://stackblitz.com/edit/angular-iurvtc
btw: your stackblitz did not render because there were spaces in the timestamps.