Forgive me in advance if this sounds like a naive question, as Angular and Typescript are not my strong suits. I am assisting a friend with an issue that I can't seem to overcome.
I have an array of players that includes details such as first name and kit color. My goal is to simply 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="{{ player.KitColour }}">
<h1>{{ player.KitColour }} Team</h1>
<p>{{ player.FirstName }}</p>
</div>My Desired Output: https://i.stack.imgur.com/yK7P2.png
Is there a way to sort them once under a single H1 tag, either Blue or Red based on Kit Color? Example: Red Player Names..
Blue Player Names..