Angular sorting and splitting and Array

Issue

I apologize in advance if this is a stupid question but Angular and Typescript isn't my forte. I am helping a friend out and can't seem to get past this problem.

I have a players array that contains information like first name and kit colour.All I want to do is sort /group the array by kit color under specific H1 tags.

import { Component, VERSION } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ];
  constructor() {
    this.Players.sort((a, b) => {
      var colorA = a.KitColour.toLowerCase();
      var colorB = b.KitColour.toLowerCase();
      if (colorA < colorB) {
        return -1;
      }
      if (colorA > colorB) {
        return 1;
      }
      return 0;
    });
    const sliceArray = (arr, chunkSize) => {
      const result = [];
      for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        result.push(chunk);
      }
      return result;
    };
    sliceArray(this.Players, 2);
    console.log(this.Players);
  }
}

<div class="container" *ngFor="let player of Players">
  <!-- <div class="Red" *ngIf="player.KitColour === 'Red'">
    <h1>Red Team</h1>
    <p>{{ player.FirstName }}</p>
  </div>
  <div class="Blue" *ngIf="player.KitColour === 'Blue'">
    <h1>Blue Team</h1>
    {{ player.FirstName }}
  </div> -->
  <div class="{{ player.KitColour }}">
    <h1>{{ player.KitColour }}</h1>
    <p>{{ player.FirstName }}</p>
</div>

My Output:

How can I just sort them once under a single H1 tag either Blue or Red depending on Kit Color ? Example: Red Player Names..

Blue Player Names..

Solution

Sort array by KitColour property

  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ].sort((a, b) => a.KitColour.localeCompare(b.KitColour));

and use this html

   <div *ngFor="let player of Players; let index = index">
    <h1 *ngIf="0 === index">{{ player.KitColour }}</h1>
    <h1 *ngIf="0 !== index && player.KitColour! !== Players[index - 1].KitColour">
      {{ player.KitColour }}
    </h1>

    <p>{{ player.FirstName }}</p>
  </div>

Answered By - Tepete