From 0e2ba6b138f707e33c0e8e1e7369f6b25a012016 Mon Sep 17 00:00:00 2001
From: 4gray <fourgray@proton.me>
Date: Sat, 27 Sep 2025 16:30:55 +0200
Subject: [PATCH] refactor: convert *ngFor to control-flow @for loops in
 channel list

---
 .../channel-list-container.component.html     | 65 ++++++++++---------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index 95f34c71b..1c0a2e4bc 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -57,7 +57,10 @@
             </ng-template>
             <mat-nav-list id="groups-list">
                 <mat-accordion multi>
-                    @for (groups of groupedChannels | keyvalue: groupsComparator; track $index) {
+                    @for (
+                        groups of groupedChannels | keyvalue: groupsComparator;
+                        track $index
+                    ) {
                         @if (groups.value.length > 0) {
                             <mat-expansion-panel>
                                 <mat-expansion-panel-header>
@@ -70,13 +73,11 @@
                                 </mat-expansion-panel-header>
 
                                 <ng-template matExpansionPanelContent>
-                                    <ng-container
-                                        *ngFor="
-                                            let channel of groups.value;
-                                            index as i;
-                                            trackBy: trackByFn
-                                        "
-                                    >
+                                    @for (
+                                        channel of groups.value;
+                                        track trackByFn($index, channel);
+                                        let i = $index
+                                    ) {
                                         <app-channel-list-item
                                             [name]="
                                                 i +
@@ -92,7 +93,7 @@
                                                 selected?.id === channel.id
                                             "
                                         ></app-channel-list-item>
-                                    </ng-container>
+                                    }
                                 </ng-template>
                             </mat-expansion-panel>
                         }
@@ -118,28 +119,30 @@
                         id="favorites-list"
                     >
                         @if (favorites.length > 0) {
-                            <app-channel-list-item
-                                *ngFor="
-                                    let channel of favorites;
-                                    index as i;
-                                    trackBy: trackByFn
-                                "
-                                [name]="
-                                    i +
-                                    1 +
-                                    '. ' +
-                                    (channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
-                                        | translate)
-                                "
-                                [isDraggable]="true"
-                                [logo]="channel?.tvg?.logo"
-                                (clicked)="selectChannel(channel)"
-                                [selected]="selected?.id === channel?.id"
-                                [showFavoriteButton]="true"
-                                (favoriteToggled)="
-                                    toggleFavoriteChannel(channel, $event)
-                                "
-                            />
+                            @for (
+                                channel of favorites;
+                                track trackByFn($index, channel);
+                                let i = $index
+                            ) {
+                                <app-channel-list-item
+                                    [name]="
+                                        i +
+                                        1 +
+                                        '. ' +
+                                        (channel?.name ||
+                                            'CHANNELS.UNNAMED_CHANNEL'
+                                            | translate)
+                                    "
+                                    [isDraggable]="true"
+                                    [logo]="channel?.tvg?.logo"
+                                    (clicked)="selectChannel(channel)"
+                                    [selected]="selected?.id === channel?.id"
+                                    [showFavoriteButton]="true"
+                                    (favoriteToggled)="
+                                        toggleFavoriteChannel(channel, $event)
+                                    "
+                                />
+                            }
                         } @else {
                             <mat-list-item
                                 ><strong>{{