How to make specific array data not repeat in *ngFor or array

Question

I have an array with the user data, which is the data that it hit point on that date that ta in the array. array:

[
0:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.24},
1:{CCT: "150403",CODIGO_EVENTO: "013",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO ", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.24},
2:{CCT: "150403",CODIGO_EVENTO: "013",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.30},
3:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190111",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.31},
4:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190111",DESCRICAO: "HORA EXTRA AUT. 50% ", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.20}
]

There in HTML it is like this:

<div *ngFor="let dados of dadosColab">
<p class="text-light "><span class="text-warning">DATA:</span> {{formatDate(data)}} </p>
<p class="text-light"><span class="text-warning">QTDE. CALCULADA:</span> {{QUANTC}} </p>
<p class="text-light"><span class="text-warning">DESCRIÇÃO:</span> {{descri}} </p>
</div>

then appears:

DATA: 20190110
dados...
DATA: 20190110
dados...

only that I need you to show only once the date, so:

DATA: 20190110
    reg1
    reg2
    reg3
DATA: 20190111
    reg1
    reg2

and so on, without repeating the date. Is there a way to do this by yourself *ngFor or by tinkering with the array? I’m lost in this problem

Answer 1

I was able to reply with the comment of Gesiel Rosa. link: https://www.competa.com/blog/custom-groupby-pipe-angular-4/

groupByPipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array<any>, property: string): Array<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:

<div *ngFor="let dados of dadosColab | groupBy:'DATA'">
  <div class="row">
          <div class="col">
            <h5 class="text-warning"> {{formatDate(dados.key)}}</h5>
          </div>
        </div>
  <div class="row p-2" *ngFor="let dados of dados.value">
<div class="col">
            <p class="text-light"> <span class="text-warning"></span> {{dados.DESCRICAO}}</p>
          </div>
          <!-- ! -->
          <div class="col">
            <p class="text-light"><span class="text-warning"></span> {{dados.TPMARCA}}</p>
          </div>
          <!-- ! -->
          <div class="col">
            <p class="text-light"><span class="text-warning"></span> {{dados.QUANTC}}</p>
          </div>
</div>
</div>

module ts.

import { GroupByPipe } from './groupByPipe';


const ROUTES: Routes = [
    {path: '', component: ManagerBhDetailComponent }
]


@NgModule({
    declarations: [ManagerBhDetailComponent, GroupByPipe],
    imports: [RouterModule.forChild(ROUTES), SharedModule],
  providers: [

  ]
})

export class ManagerBhDetailModule{}