merge divs with same value - html

Question

I am trying to merge the divs that have the same number in order to see the week and its number.
This is how my html looks like
<div class="wrapper clearfix">
<div class="left">
<label class="kw">WeekNo.</label>
</div>
<div class="right week-number" *ngFor="let day of days">
<label class="number-label"><span>{{day.weekNumber}} </span></label>
</div>
</div>
do I have to use *ngIf or just css?
I have read this How to merge two divs, but I don't know where ti include the if statement
this is the class I am using
export class Day {
number: number;
weekDay: number;
name: string;
weekNumber: number;
constructor(number: number, weekDay: number, name: string, weekNumber: number
) {
this.number = number;
this.weekDay = weekDay;
this.name = name;
this.weekNumber = weekNumber;
}
}
and this is how it should look afet merging

Answer 1

You can do it the following way by creating a groupBy pipe and including Bootstrap 4 in the project. Here is a plain working demo (you will have to do the styling) demo:
groupby.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
transform(collection: any[], property: string): any[] {
// prevents the application from breaking if the array of objects doesn't exist yet
if(!collection) {
return null;
}
const groupedCollection = collection.reduce((previous, current)=> {
if(!previous[current[property]]) {
previous[current[property]] = [current];
} else {
previous[current[property]].push(current);
}
return previous;
}, {});
// this will return an array of objects, each object containing a group of objects
return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
}
}
html code
<div class="table table-borderless ">
<div class="col-md-12 text-center border"><span>{{currentMonthName}}</span> <span>{{currentYear}}</span></div>
<div class="d-flex">
<div class=" text-center m-2 border" *ngFor="let day of days | groupBy:'weekNumber'">
{{day.key}}
<table class="table">
<tbody>
<tr>
<th scope="row" *ngFor="let x of day.value ">{{x.number}}</th>
</tr>
<tr>
<th scope="row" *ngFor="let y of day.value ">{{y.name}}</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>