Как вставить узел в список ионов в алфавитном порядке

Question

У меня есть список элементов, отсортированных в алфавитном порядке. Я хочу вставить алфавитные заголовки в список (таким образом, заголовок 'A' в начале a, 'B' в начале b и т. Д.), Я хочу сделать это, манипулируя dom с помощью некоторого JavaScript в файле .ts после страница загрузилась, но я не могу понять, как (я нуб, сам учу себя здесь!).

Я прочитал множество разных подходов, но, кажется, ничто не выскочило на меня как правильное решение. Я читал о DomController, который выглядел великолепно, видел множество других альтернатив, просто ничего, что позволило бы мне прочитать строку в алфавитном порядке и затем вставить узел.

Это HTML-код перед компиляцией ...

<div *ngIf="items.length > 0" class="list-mini">
  <ion-list lines="none">
    <ion-item *ngFor="let item of items" [routerLink]="['/details', item.payload.doc.id]">
      <ion-label>{{item.payload.doc.data
      ().recipeName}}</ion-label>
      <ion-thumbnail slot="end">
        <img [src]="item.payload.doc.data().image">
      </ion-thumbnail>
    </ion-item>
  </ion-list>

Это он скомпилирован (если нужно) ...

<ion-item _ngcontent-c1="" tabindex="0" ng-reflect-router-link="/details,Jr24YUyo2IcjK2mA1DpY" class="in-list item ion-activatable ion-focusable item-label hydrated">
<ion-label _ngcontent-c1="" class="sc-ion-label-md-h sc-ion-label-md-s hydrated">Alias test name</ion-label>
<ion-thumbnail _ngcontent-c1="" slot="end" class="hydrated"><img _ngcontent-c1="" src="./assets/imgs/default_image.jpg"></ion-thumbnail>
</ion-item>

Я извлекаю данные из firebase, и я думаю, что правильным способом сделать это было бы сделать что-то с данными, прежде чем я переберу их в списке, но мысль, что манипулировать dom будет проще, и я бы взял хит производительности.

Любая помощь приветствуется !!