Accessing the first last item in an *ngFor?

I'm working on a personal application in Ionic in which I am trying to create a alphabetical header/divider for a list of games by checking the first letter of each game, and if the first letter is not the same as the last game's first letter(they are coming in sorted), generate a header.

Here's my firstLetter() function:

public firstLetter(name: any) {
    return name.charAt(0);
}

And here is my HTML/ng:

<ion-item-group *ngFor="let game of games; let i = index;">
        <ion-item-divider color="light" *ngIf="firstLetter(game.name) != firstLetter(game[i-1].name)">{{firstLetter(game.name)}}</ion-item-divider>
        <ion-item (click)="openGameSummary(game)">
          <h2>{{game.name}}</h2>
        </ion-item>
      </ion-item-group>

I am getting an error that the property 'name' cannot be found. Which, I assume is because I am using the wrong syntax.

What is the way to do this?