Merge Divs With Same Value

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

Solution 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'})
exportclassGroupByPipeimplementsPipeTransform {
    transform(collection: any[], property: string): any[] {
        // prevents the application from breaking if the array of objects doesn't exist yetif(!collection) {
            returnnull;
        }

        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 objectsreturnObject.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

html code

<divclass="table table-borderless "><divclass="col-md-12 text-center border"><span>{{currentMonthName}}</span>&nbsp;<span>{{currentYear}}</span></div><divclass="d-flex"><divclass=" text-center m-2 border" *ngFor="let day of days | groupBy:'weekNumber'">
        {{day.key}}
      <tableclass="table"><tbody><tr><thscope="row"  *ngFor="let x of day.value ">{{x.number}}</th></tr><tr><thscope="row"  *ngFor="let y of day.value ">{{y.name}}</th></tr></tbody></table></div></div></div>

Share