Displaying all but [0] element of map key arrays - arrays

Question

The premise of this question is that in the following TS block, I am creating an array that is made from the given map's keys and console logging to ensure that the arrays are created as needed.
public certKeys: String[];
public certMap: Map<String, DataObject[]> = new Map();
public allData: DataObject[];
#Input()
set data(data: DataObject[]) {
if (!data) { return; }
new Set(data.map(i => i.certTypeDescription)).forEach(i => {
this.certMap.set(i, []);
});
data.forEach(i => {
this.certMap.get(i.certTypeDescription).push(i);
});
this.certKeys = Array.from(this.certMap.keys());
this.allData = data;
console.log(this.certMap);
}
Now when this translates to the HTML portion of this, I am wanting to display the most recent record (or the [0] element) of each key array. This is already being accomplished. However, the other portion is that in the accordion drop down, I need to retrieve the rest of the elements save for the [0] element. below you will see what I have so far:
<app-basic-card myTitle="Data">
<i cardIcon class="uxd uxd-mode-edit uxd-lg uxd-pointer text-primary" (click)="openEditDialog()"></i>
<div cardBody class="accordion" *ngIf="allData; else loading">
<p *ngIf="allData?.length === 0">
No allData found...
</p>
<mat-accordion *ngIf="allData?.length>0">
<mat-expansion-panel *ngFor="let cert of certKeys">
<mat-expansion-panel-header>
<mat-panel-title class="list-group list-group-flush">
<ng-container>
<div>
<div class="w-50 float-left">{{cert}}</div>
<div class="w-50 float-right">
<i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert)[0]?.certificationResult)"></i>
{{getDateTaken(certMap.get(cert)[0].certificationDate)}}
</div>
</div>
</ng-container>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container>
<div *ngFor = "let certKeys of allData">
<div class="w-50 float-left">{{cert}}</div>
<div class="w-50 float-right">
<i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert).certificationResult)"></i>
{{getDateTaken(certMap.get(cert).certDate)}}
</div>
</div>
</ng-container>
</mat-expansion-panel>
</mat-accordion>
</div>
<ng-template cardLoading #loading class="text-center">
<mat-spinner class="loading-spinner" style="margin:0 auto;" diameter="50"></mat-spinner>
</ng-template>
</app-basic-card>
My question is how do I accomplish retrieving every element but the [0] element of each key array? There is something that I very obviously am missing. I would appreciate any answers that are given and resources that may point me in the right direction. I thank you all for your time.

Answer 1

I don't know Angular tbh, but if you can modify the array you could use slice method, which returns a shallow copy of the original array, so the original will stay untouched.
Can you change this line:
<div *ngFor = "let certKeys of allData">
Into this:
<div *ngFor = "let certKeys of allData.slice(1)">
?
Working snippet of the slice() function.
const items = [1, 2, 3, 4];
const itemsWithoutTheFirstItem = items.slice(1);
// Target array contains all but first item
console.log(itemsWithoutTheFirstItem);
// Original array stays the same
console.log(items);

Answer 2

I think of two options right now. The first one is using *ngIf or a simple Pipe.
First option:
<mat-expansion-panel *ngFor="let cert of certKeys; let index = index">
<mat-expansion-panel-header *ngIf="index > 0">
...
</mat-expansion-panel>
Second option:
Create a Angular Pipe, which returns a new array except the first entry:
#Pipe({name: 'ignoreFirst'})
export class IgnoreFirstEntryPipe implements PipeTransform {
transform(arr: any[]) {
// Returns a new array without the original first entry
return arr.slice(1);
}
}
And in your html:
<mat-expansion-panel *ngFor="let cert of certKeys | ignoreFirst">
<mat-expansion-panel-header>
...
</mat-expansion-panel>