From 5dc6ae44f260f89c1edc23eabedbfd29c0052f21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 30 Jan 2025 18:56:38 +0100
Subject: [PATCH] MOBILE-4653 html: Adapt new control flow on core components

Some changes left untouched because in implies type checking
---
 .../attachments/core-attachments.html         | 58 +++++++------
 .../bs-tooltip/core-bs-tooltip.html           |  7 +-
 .../core-button-with-spinner.html             | 13 +--
 src/core/components/chart/core-chart.html     | 16 ++--
 .../components/combobox/core-combobox.html    | 52 +++++++-----
 .../context-menu/context-menu-item.ts         |  3 +
 .../core-context-menu-popover.html            | 58 +++++++------
 .../components/course-image/course-image.html | 11 ++-
 .../core-download-refresh.html                | 42 ++++++----
 .../core-dynamic-component.html               |  4 +-
 .../components/empty-box/core-empty-box.html  |  4 +-
 src/core/components/file/core-file.html       | 65 ++++++++------
 src/core/components/files/core-files.html     | 33 +++++---
 .../group-selector/group-selector.html        | 32 ++++---
 src/core/components/iframe/core-iframe.html   | 61 ++++++++------
 .../core-infinite-loading.html                | 61 +++++++++-----
 .../input-errors/core-input-errors.html       | 59 ++++++++-----
 src/core/components/loading/core-loading.html | 16 ++--
 .../local-file/core-local-file.html           | 84 +++++++++++--------
 .../mark-required/core-mark-required.html     |  4 +-
 src/core/components/message/message.html      | 83 ++++++++++--------
 src/core/components/mod-icon/mod-icon.html    |  9 +-
 .../navigation-bar/core-navigation-bar.html   | 34 ++++----
 .../password-modal/password-modal.html        |  8 +-
 .../progress-bar/core-progress-bar.html       | 12 ++-
 .../components/recaptcha/core-recaptcha.html  | 39 +++++----
 .../show-password/core-show-password.html     |  4 +-
 src/core/components/site-logo/site-logo.html  | 41 ++++++---
 .../site-picker/core-site-picker.html         | 16 ++--
 .../components/sites-list/sites-list.html     | 75 ++++++++++-------
 .../components/swipe-slides/swipe-slides.html | 17 ++--
 .../tabs-outlet/core-tabs-outlet.html         | 43 ++++++----
 .../components/tabs-outlet/tabs-outlet.ts     | 24 ++++--
 src/core/components/tabs/core-tabs.html       | 62 ++++++++------
 src/core/components/tabs/tab.ts               |  2 +-
 src/core/components/timer/core-timer.html     | 65 ++++++++------
 .../user-avatar/core-user-avatar.html         | 45 ++++++----
 37 files changed, 765 insertions(+), 497 deletions(-)

diff --git a/src/core/components/attachments/core-attachments.html b/src/core/components/attachments/core-attachments.html
index 5fa75df48c0..32b2f207478 100644
--- a/src/core/components/attachments/core-attachments.html
+++ b/src/core/components/attachments/core-attachments.html
@@ -3,15 +3,19 @@
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <p class="item-heading">{{ title }} <span [core-mark-required]="required" class="core-mark-required"></span></p>
-                <span *ngIf="maxSubmissionsReadable">
-                    {{ 'core.maxsizeandattachments' | translate:{$a: {size: maxSizeReadable, attachments: maxSubmissionsReadable} } }}
+                <span>
+                    @if (maxSubmissionsReadable) {
+                        {{ 'core.maxsizeandattachments' | translate:{$a: {size: maxSizeReadable, attachments: maxSubmissionsReadable} } }}
+                    } @else {
+                        {{ 'core.maxfilesize' | translate:{$a: maxSizeReadable} }}
+                    }
                 </span>
-                <span *ngIf="!maxSubmissionsReadable">{{ 'core.maxfilesize' | translate:{$a: maxSizeReadable} }}</span>
             </ion-label>
-            <ion-button slot="end" (click)="add()" [ariaLabel]="'core.fileuploader.addfiletext' | translate"
-                *ngIf="unlimitedFiles || (maxSubmissions !== undefined && maxSubmissions >= 0 && files && files.length < maxSubmissions)">
-                <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
-            </ion-button>
+            @if (unlimitedFiles || (maxSubmissions !== undefined && maxSubmissions >= 0 && files && files.length < maxSubmissions)) {
+                <ion-button slot="end" (click)="add()" [ariaLabel]="'core.fileuploader.addfiletext' | translate">
+                    <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
+                </ion-button>
+            }
         </ion-item>
 
         @if (fileTypes && fileTypes.mimetypes && fileTypes.mimetypes.length) {
@@ -25,30 +29,36 @@
                     </ion-item>
 
                     <ul class="core-attachments" slot="content">
-                        <li *ngFor="let typeInfo of fileTypes.info">
-                            <strong *ngIf="typeInfo.name">{{typeInfo.name}} </strong>{{typeInfo.extlist}}
-                        </li>
+                        @for (typeInfo of fileTypes.info; track typeInfo.name) {
+                            <li>
+                                @if (typeInfo.name) {
+                                    <strong>{{typeInfo.name}} </strong>
+                                }
+                                {{typeInfo.extlist}}
+                            </li>
+                        }
                     </ul>
                 </ion-accordion>
             </ion-accordion-group>
         }
 
-
-
         <ng-container *ngFor="let file of files; let index=index">
-            <!-- Files already attached to the submission, either in online or in offline. -->
-            <core-file *ngIf="!file.name" [file]="file" [component]="component" [componentId]="componentId" [canDelete]="true"
-                (onDelete)="delete(index, true)" [canDownload]="!file.offline" />
-
-            <!-- Files added to draft but not attached to submission yet. -->
-            <core-local-file *ngIf="file.name" [file]="file" [manage]="true" (onDelete)="delete(index, false)"
-                (onRename)="renamed(index, $event)" />
+            @if (file.name) {
+                <!-- Files added to draft but not attached to submission yet. -->
+                <core-local-file [file]="file" [manage]="true" (onDelete)="delete(index, false)" (onRename)="renamed(index, $event)" />
+            } @else {
+                <!-- Files already attached to the submission, either in online or in offline. -->
+                <core-file [file]="file" [component]="component" [componentId]="componentId" [canDelete]="true"
+                    (onDelete)="delete(index, true)" [canDownload]="!file.offline" />
+            }
         </ng-container>
 
-        <ion-item class="ion-text-wrap" *ngIf="!files || !files.length">
-            <ion-label>
-                <p>{{ 'core.fileuploader.nofilesattached' | translate }}</p>
-            </ion-label>
-        </ion-item>
+        @if (!files || !files.length) {
+            <ion-item class="ion-text-wrap">
+                <ion-label>
+                    <p>{{ 'core.fileuploader.nofilesattached' | translate }}</p>
+                </ion-label>
+            </ion-item>
+        }
     </ion-card>
 </core-loading>
diff --git a/src/core/components/bs-tooltip/core-bs-tooltip.html b/src/core/components/bs-tooltip/core-bs-tooltip.html
index cc5e8e36cf0..ed8c13be770 100644
--- a/src/core/components/bs-tooltip/core-bs-tooltip.html
+++ b/src/core/components/bs-tooltip/core-bs-tooltip.html
@@ -1,6 +1,9 @@
 <ion-item class="ion-text-wrap">
     <ion-label>
-        <p *ngIf="html" [innerHTML]="content"></p>
-        <p *ngIf="!html">{{content}}</p>
+        @if (html) {
+            <p [innerHTML]="content"></p>
+        } @else {
+            <p>{{content}}</p>
+        }
     </ion-label>
 </ion-item>
diff --git a/src/core/components/button-with-spinner/core-button-with-spinner.html b/src/core/components/button-with-spinner/core-button-with-spinner.html
index 7b4e27e2438..1ff53d98dee 100644
--- a/src/core/components/button-with-spinner/core-button-with-spinner.html
+++ b/src/core/components/button-with-spinner/core-button-with-spinner.html
@@ -1,6 +1,7 @@
-<div *ngIf="!loading" @coreShowHideAnimation>
-    <ng-content />
-</div>
-
-<!-- Spinner. -->
-<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate" />
+@if (loading) {
+    <ion-spinner @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate" />
+} @else {
+    <div @coreShowHideAnimation>
+        <ng-content />
+    </div>
+}
diff --git a/src/core/components/chart/core-chart.html b/src/core/components/chart/core-chart.html
index 95cdd8ed1e2..78dc4633464 100644
--- a/src/core/components/chart/core-chart.html
+++ b/src/core/components/chart/core-chart.html
@@ -1,8 +1,12 @@
 <canvas #canvas [attr.height]="height"></canvas>
 
-<ion-list *ngIf="chart">
-    <ion-item *ngFor="let data of legendItems">
-        <ion-icon name="fas-square" slot="start" [style.color]="data.fillStyle" aria-hidden="true" />
-        <ion-label>{{data.text}}</ion-label>
-    </ion-item>
-</ion-list>
+@if (chart) {
+    <ion-list>
+        @for (data of legendItems; track data.text) {
+            <ion-item>
+                <ion-icon name="fas-square" slot="start" [style.color]="data.fillStyle" aria-hidden="true" />
+                <ion-label>{{data.text}}</ion-label>
+            </ion-item>
+        }
+    </ion-list>
+}
diff --git a/src/core/components/combobox/core-combobox.html b/src/core/components/combobox/core-combobox.html
index 7b82ff63f64..8cc2c459f89 100644
--- a/src/core/components/combobox/core-combobox.html
+++ b/src/core/components/combobox/core-combobox.html
@@ -1,24 +1,34 @@
-<ion-select *ngIf="interface !== 'modal'" class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onValueChanged(selection)"
-    interface="popover" [disabled]="disabled" [class.combobox-icon-only]="icon"
-    [interfaceOptions]="{alignment: 'start', arrow: false, cssClass: 'core-combobox-select'}">
-    <div slot="label">
-        <span class="sr-only" *ngIf="label">{{ label }}</span>
-        <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
-    </div>
+@if (interface !== 'modal') {
+    <ion-select class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onValueChanged(selection)" interface="popover"
+        [disabled]="disabled" [class.combobox-icon-only]="icon"
+        [interfaceOptions]="{alignment: 'start', arrow: false, cssClass: 'core-combobox-select'}">
+        <div slot="label">
+            @if (label) {
+                <span class="sr-only">{{ label }}</span>
+            }
+            @if (icon) {
+                <ion-icon [name]="icon" aria-hidden="true" />
+            }
+        </div>
 
-    <ng-content />
-</ion-select>
+        <ng-content />
+    </ion-select>
+} @else {
+    <ion-button aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId" [attr.aria-expanded]="expanded"
+        (click)="openModal()" [disabled]="disabled" expand="block" role="combobox">
+        @if (icon) {
+            <ion-icon [name]="icon" slot="start" aria-hidden="true" />
+        }
 
-<ion-button *ngIf="interface === 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
-    [attr.aria-expanded]="expanded" (click)="openModal()" [disabled]="disabled" expand="block" role="combobox">
-    <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true" />
+        @if (label) {
+            <span class="sr-only">{{ label }},</span>
+        }
+        <div class="select-text">
+            <slot name="text"><core-format-text [text]="selection" /></slot>
+        </div>
 
-    <span class="sr-only" *ngIf="label">{{ label }},</span>
-    <div class="select-text">
-        <slot name="text"><core-format-text [text]="selection" /></slot>
-    </div>
-
-    <div class="select-icon" role="presentation" aria-hidden="true" slot="end">
-        <div class="select-icon-inner"></div>
-    </div>
-</ion-button>
+        <div class="select-icon" role="presentation" aria-hidden="true" slot="end">
+            <div class="select-icon-inner"></div>
+        </div>
+    </ion-button>
+}
diff --git a/src/core/components/context-menu/context-menu-item.ts b/src/core/components/context-menu/context-menu-item.ts
index 3008fc82d9b..5d68f452273 100644
--- a/src/core/components/context-menu/context-menu-item.ts
+++ b/src/core/components/context-menu/context-menu-item.ts
@@ -15,6 +15,7 @@
 import { Component, Input, Output, OnInit, OnDestroy, EventEmitter, OnChanges, SimpleChange } from '@angular/core';
 import { CoreContextMenuComponent } from '../context-menu/context-menu';
 import { toBoolean } from '@/core/transforms/boolean';
+import { CoreUtils } from '@singletons/utils';
 
 /**
  * This directive adds a item to the Context Menu popover.
@@ -58,6 +59,8 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
     @Output() onClosed?: EventEmitter<() => void>; // Will emit an event when the popover is closed because the item was clicked.
     @Output() toggleChange = new EventEmitter<boolean>();// Will emit an event when toggle changes to enable 2-way data binding.
 
+    uniqueId = CoreUtils.getUniqueId('CoreContextMenuItem');
+
     protected hasAction = false;
     protected destroyed = false;
 
diff --git a/src/core/components/context-menu/core-context-menu-popover.html b/src/core/components/context-menu/core-context-menu-popover.html
index eda89d1e497..4bbb172ca63 100644
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@@ -1,28 +1,38 @@
 <ion-content>
     <ion-list [id]="uniqueId" role="menu">
-        <ion-item class="ion-text-wrap" lines="none" *ngFor="let item of items" core-link [capture]="item.captureLink"
-            [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction"
-            [hidden]="item.hidden" [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
-            [showBrowserWarning]="item.showBrowserWarning">
-            <ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
-                <p class="item-heading">{{ item.content }}</p>
-            </ion-toggle>
-            <ng-container *ngIf="item.iconAction !== 'toggle'">
-                <ion-label>
-                    <p class="item-heading">{{ item.content }}</p>
-                </ion-label>
-                <ng-container *ngIf="(item.href || item.action) && item.iconAction">
-                    <ion-icon *ngIf="item.iconAction !== 'spinner'" [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end"
-                        aria-hidden="true" />
-                    <ion-spinner *ngIf="item.iconAction === 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate" />
-                </ng-container>
-            </ng-container>
-            <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
-                <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
-                <span class="sr-only" *ngIf="item.badgeA11yText">
-                    {{ item.badgeA11yText | translate: {$a : item.badge } }}
-                </span>
-            </ion-badge>
-        </ion-item>
+        @for (item of items; track item.uniqueId) {
+            <ion-item class="ion-text-wrap" lines="none" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin"
+                [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden"
+                [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
+                [showBrowserWarning]="item.showBrowserWarning">
+                @if (item.iconAction === 'toggle') {
+                    <ion-toggle [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
+                        <p class="item-heading">{{ item.content }}</p>
+                    </ion-toggle>
+                } @else {
+                    <ion-label>
+                        <p class="item-heading">{{ item.content }}</p>
+                    </ion-label>
+                    @if ((item.href || item.action) && item.iconAction) {
+                        @if (item.iconAction === 'spinner') {
+                            <ion-spinner slot="end" [attr.aria-label]="'core.loading' | translate" />
+                        } @else {
+                            <ion-icon [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true" />
+                        }
+                    }
+                }
+
+                @if (item.badge) {
+                    <ion-badge class="{{item.badgeClass}}" slot="end">
+                        <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
+                        @if (item.badgeA11yText) {
+                            <span class="sr-only">
+                                {{ item.badgeA11yText | translate: {$a : item.badge } }}
+                            </span>
+                        }
+                    </ion-badge>
+                }
+            </ion-item>
+        }
     </ion-list>
 </ion-content>
diff --git a/src/core/components/course-image/course-image.html b/src/core/components/course-image/course-image.html
index adc91885c63..6334d1509dd 100644
--- a/src/core/components/course-image/course-image.html
+++ b/src/core/components/course-image/course-image.html
@@ -1,4 +1,7 @@
-<ion-icon *ngIf="!course().courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true" />
-<ion-avatar *ngIf="course().courseimage" slot="start">
-    <img [url]="course().courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
-</ion-avatar>
+@if (course().courseimage) {
+    <ion-avatar slot="start">
+        <img [url]="course().courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
+    </ion-avatar>
+} @else {
+    <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true" />
+}
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 9aa45dbb244..3a878118571 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,25 +1,33 @@
-<ng-container *ngIf="enabled && !loading">
+@if (enabled && !loading) {
+
     <!-- Download button. -->
-    <ion-button *ngIf="status === statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
-        [ariaLabel]="(statusTranslatable || translates.notdownloaded) | translate: { name : statusSubject }">
-        <ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true" />
-    </ion-button>
+    @if (status === statusNotDownloaded) {
+        <ion-button fill="clear" (click)="download($event, false)" @coreShowHideAnimation
+            [ariaLabel]="(statusTranslatable || translates.notdownloaded) | translate: { name : statusSubject }">
+            <ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true" />
+        </ion-button>
+    }
 
     <!-- Refresh button. -->
-    <ion-button *ngIf="status === statusOutdated || (status === statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" @coreShowHideAnimation
-        [ariaLabel]="(statusTranslatable || translates.outdated) | translate: { name : statusSubject }">
-        <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true" />
-    </ion-button>
+    @if (status === statusOutdated || (status === statusDownloaded && !canTrustDownload)) {
+        <ion-button fill="clear" (click)="download($event, true)" @coreShowHideAnimation
+            [ariaLabel]="(statusTranslatable || translates.outdated) | translate: { name : statusSubject }">
+            <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true" />
+        </ion-button>
+    }
 
     <!-- Downloaded status icon. -->
-    <ion-icon *ngIf="status === statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
-        name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || translates.downloaded) | translate: { name : statusSubject }"
-        role="status" />
+    @if (status === statusDownloaded && canTrustDownload) {
+        <ion-icon class="core-icon-downloaded ion-padding-horizontal" color="success" name="fam-cloud-done"
+            [attr.aria-label]="(statusTranslatable || translates.downloaded) | translate: { name : statusSubject }" role="status" />
+    } @else if (status === statusDownloading) {
+        <ion-spinner @coreShowHideAnimation
+            [attr.aria-label]="(statusTranslatable || translates.downloading) | translate: { name : statusSubject }" />
+    }
 
-    <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || translates.downloading) | translate: { name : statusSubject }" />
-</ng-container>
+}
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="translates.loading | translate: { name : statusSubject }" />
+@if (loading) {
+    <ion-spinner @coreShowHideAnimation [attr.aria-label]="translates.loading | translate: { name : statusSubject }" />
+}
diff --git a/src/core/components/dynamic-component/core-dynamic-component.html b/src/core/components/dynamic-component/core-dynamic-component.html
index bbab0ac5b68..2f5beb3d2ef 100644
--- a/src/core/components/dynamic-component/core-dynamic-component.html
+++ b/src/core/components/dynamic-component/core-dynamic-component.html
@@ -1,5 +1,7 @@
 <!-- Content to display if no dynamic component. -->
-<ng-content *ngIf="!instance" />
+@if (!instance) {
+<ng-content />
+}
 
 <!-- Container of the dynamic component -->
 <ng-container #dynamicComponent />
diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html
index 6d877d5024d..1d5b6e00ae3 100644
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/src/core/components/empty-box/core-empty-box.html
@@ -3,5 +3,7 @@
 } @else if (image) {
     <img [src]="image" role="presentation" alt="">
 }
-<p *ngIf="message">{{ message }}</p>
+@if (message) {
+    <p>{{ message }}</p>
+}
 <ng-content />
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index 5d7661c154d..1cddb03b96e 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -1,31 +1,42 @@
 <ion-card class="card-file ion-activatable">
-    <ion-item *ngIf="file" tappable class="ion-text-wrap item-file" (click)="download($event, true)" [detail]="false">
-        <ion-thumbnail slot="start">
-            <img [src]="fileIcon" alt="" role="presentation" />
-        </ion-thumbnail>
-        <ion-label>
-            <p class="item-heading">
-                <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>
-            </p>
-            <p *ngIf="fileSizeReadable || showTime">
-                <ng-container *ngIf="fileSizeReadable">{{ fileSizeReadable }}</ng-container>
-                <ng-container *ngIf="fileSizeReadable && showTime"> · </ng-container>
-                <ng-container *ngIf="showTime">{{ timemodified * 1000 | coreFormatDate }}</ng-container>
-            </p>
-        </ion-label>
-        <div slot="end" class="flex-row">
-            <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" [canTrustDownload]="!alwaysDownload"
-                (action)="download()" />
+    @if (file) {
+        <ion-item tappable class="ion-text-wrap item-file" (click)="download($event, true)" [detail]="false">
+            <ion-thumbnail slot="start">
+                <img [src]="fileIcon" alt="" role="presentation" />
+            </ion-thumbnail>
+            <ion-label>
+                <p class="item-heading">
+                    <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>
+                </p>
+                @if (fileSizeReadable || showTime) {
+                    <p>
+                        @if (fileSizeReadable) {
+                            {{ fileSizeReadable }}
+                        }
+                        @if (fileSizeReadable && showTime) {
+                            ·
+                        }
+                        @if (showTime) {
+                            {{ timemodified * 1000 | coreFormatDate }}
+                        }
+                    </p>
+                }
+            </ion-label>
+            <div slot="end" class="flex-row">
+                <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
+                    [canTrustDownload]="!alwaysDownload" (action)="download()" />
 
-            <ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
-                <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
-            </ion-button>
-
-            <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)" [ariaLabel]="'core.delete' | translate"
-                color="danger">
-                <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
-            </ion-button>
-        </div>
-    </ion-item>
+                @if (isDownloaded && isIOS) {
+                    <ion-button fill="clear" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
+                        <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
+                    </ion-button>
+                } @else if (!isDownloading && canDelete) {
+                    <ion-button fill="clear" (click)="delete($event)" [ariaLabel]="'core.delete' | translate" color="danger">
+                        <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
+                    </ion-button>
+                }
+            </div>
+        </ion-item>
+    }
     <ion-ripple-effect />
 </ion-card>
diff --git a/src/core/components/files/core-files.html b/src/core/components/files/core-files.html
index 4a2a9fd4767..b3f5dcfd605 100644
--- a/src/core/components/files/core-files.html
+++ b/src/core/components/files/core-files.html
@@ -1,17 +1,24 @@
-<ng-container *ngIf="showInline && contentText">
+@if (showInline && contentText) {
     <core-format-text [text]="contentText" [filter]="false" />
-</ng-container>
-<ng-container *ngFor="let file of files; let i = index">
-    <!-- Files already attached to the filearea. -->
-    <core-file *ngIf="!file.name && !file.embedType" [file]="file" [component]="component" [componentId]="componentId"
-        [alwaysDownload]="alwaysDownload" [canDownload]="canDownload" [showSize]="showSize" [showTime]="showTime" />
+}
 
-    <!-- Files stored in offline to be sent later. -->
-    <core-local-file *ngIf="file.name && !file.embedType" [file]="file" />
+<ng-container *ngFor="let file of files; let i = index">
+    @if (!file.embedType) {
+        @if (!file.name) {
+            <!-- Files already attached to the filearea. -->
+            <core-file [file]="file" [component]="component" [componentId]="componentId" [alwaysDownload]="alwaysDownload"
+                [canDownload]="canDownload" [showSize]="showSize" [showTime]="showTime" />
+        } @else {
+            <!-- Files stored in offline to be sent later. -->
+            <core-local-file [file]="file" />
+        }
+    }
 
-    <ion-item class="ion-text-wrap" *ngIf="extraHtml && extraHtml[i]">
-        <ion-label>
-            <core-format-text [component]="component" [componentId]="componentId" [text]="extraHtml[i]" />
-        </ion-label>
-    </ion-item>
+    @if (extraHtml && extraHtml[i]) {
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <core-format-text [component]="component" [componentId]="componentId" [text]="extraHtml[i]" />
+            </ion-label>
+        </ion-item>
+    }
 </ng-container>
diff --git a/src/core/components/group-selector/group-selector.html b/src/core/components/group-selector/group-selector.html
index 2a4a73fa9f6..59545d74a02 100644
--- a/src/core/components/group-selector/group-selector.html
+++ b/src/core/components/group-selector/group-selector.html
@@ -1,12 +1,15 @@
-<ng-container *ngIf="groupInfo && groupInfo.groups.length > 0 && (groupInfo.separateGroups || groupInfo.visibleGroups)">
-    <ion-card class="core-info-card" *ngIf="multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1">
-        <ion-item class="ion-text-wrap">
-            <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
-            <ion-label>
-                <p class="item-label">{{ multipleGroupsMessage }}</p>
-            </ion-label>
-        </ion-item>
-    </ion-card>
+@if (groupInfo && groupInfo.groups.length > 0 && (groupInfo.separateGroups || groupInfo.visibleGroups)) {
+
+    @if (multipleGroupsMessage && groupInfo.groups && groupInfo.groups.length > 1) {
+        <ion-card class="core-info-card">
+            <ion-item class="ion-text-wrap">
+                <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
+                <ion-label>
+                    <p class="item-label">{{ multipleGroupsMessage }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-card>
+    }
 
     <ion-item class="ion-text-wrap core-group-selector" lines="full">
         <ion-icon name="fas-user-group" slot="start" aria-hidden="true" />
@@ -14,9 +17,12 @@
             [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
             <p class="item-heading" slot="label">{{ (groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible') | translate }}
             </p>
-            <ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id">
-                <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
-            </ion-select-option>
+            @for (group of groupInfo.groups; track group.id) {
+                <ion-select-option [value]="group.id">
+                    <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
+                </ion-select-option>
+            }
         </ion-select>
     </ion-item>
-</ng-container>
+
+}
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index 4603c3c9979..f111bc588ab 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -3,34 +3,41 @@
 
 <!--The iframe needs to be outside of core-loading, otherwise the request is canceled while loading. -->
 <!-- Don't add the iframe until safeUrl is set, adding an iframe with null as src causes the iframe to load the whole app. -->
-<div *ngIf="safeUrl && !launchExternalLabel"
-    [ngStyle]="{'min-width': 'min(' +iframeWidth+', 100%)', 'min-height': 'min(' +iframeHeight+', 100%)'}" class="core-iframe-container">
-    <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar && !loading">
-        <ion-button fill="clear" (click)="toggleFullscreen()"
-            [ariaLabel]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
-            <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true" />
-        </ion-button>
-    </core-navbar-buttons>
+@if (safeUrl && !launchExternalLabel) {
+    <div [ngStyle]="{'min-width': 'min(' +iframeWidth+', 100%)', 'min-height': 'min(' +iframeHeight+', 100%)'}"
+        class="core-iframe-container">
+        @if (initialized && showFullscreenOnToolbar && !loading) {
+            <core-navbar-buttons slot="end" prepend>
+                <ion-button fill="clear" (click)="toggleFullscreen()"
+                    [ariaLabel]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
+                    <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true" />
+                </ion-button>
+            </core-navbar-buttons>
+        }
 
-    <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
-    <ng-container *ngIf="allowFullscreen">
-        <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
-            allowfullscreen="true" [class.core-iframe-loading]="loading">
-        </iframe>
-    </ng-container>
-    <ng-container *ngIf="!allowFullscreen">
-        <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
-            [class.core-iframe-loading]="loading">
-        </iframe>
-    </ng-container>
+        <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
+        @if (allowFullscreen) {
+            <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
+                allowfullscreen="true" [class.core-iframe-loading]="loading">
+            </iframe>
+        } @else {
+            <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
+                [class.core-iframe-loading]="loading">
+            </iframe>
+        }
 
-    <ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
-        class="core-button-as-link core-iframe-help">
-        {{ 'core.iframehelp' | translate }}
-    </ion-button>
-</div>
+        @if (!loading && displayHelp) {
+            <ion-button expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
+                class="core-button-as-link core-iframe-help">
+                {{ 'core.iframehelp' | translate }}
+            </ion-button>
+        }
+    </div>
+}
 
 <!-- Iframe content needs to be launched in an external app. -->
-<ion-button *ngIf="launchExternalLabel" expand="block" class="ion-text-wrap ion-margin" (click)="launchExternal()">
-    {{ launchExternalLabel }}
-</ion-button>
+@if (launchExternalLabel) {
+    <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="launchExternal()">
+        {{ launchExternalLabel }}
+    </ion-button>
+}
diff --git a/src/core/components/infinite-loading/core-infinite-loading.html b/src/core/components/infinite-loading/core-infinite-loading.html
index 0fd30d4203f..2b1dc83f7b7 100644
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@@ -1,13 +1,21 @@
-<ng-container *ngIf="!loadingMore && position !== 'top'">
-    <div *ngIf="enabled || error" class="ion-padding-horizontal">
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
-            {{ 'core.loadmore' | translate }}
-        </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore(true)" fill="outline">
-            {{ 'core.tryagain' | translate }}
-        </ion-button>
-    </div>
-</ng-container>
+@if (!loadingMore && position !== 'top') {
+
+    @if (enabled || error) {
+        <div class="ion-padding-horizontal">
+            @if (error) {
+                <ion-button expand="block" (click)="loadMore(true)" fill="outline">
+                    {{ 'core.tryagain' | translate }}
+                </ion-button>
+            } @else {
+                <ion-button expand="block" (click)="loadMore(true)" fill="outline">
+                    {{ 'core.loadmore' | translate }}
+                </ion-button>
+            }
+
+        </div>
+    }
+
+}
 
 <!-- Don't allow disabling infinite-scroll while loading more items on scroll, otherwise infinite scroll stops working. -->
 <ion-infinite-scroll [disabled]="(loadingMore && loadingForced) || (!loadingMore && (!enabled || error))" (ionInfinite)="loadMore()"
@@ -15,17 +23,24 @@
     <ion-infinite-scroll-content />
 </ion-infinite-scroll>
 
-<ng-container *ngIf="!loadingMore && position === 'top'">
-    <div *ngIf="enabled || error" class="ion-padding-horizontal">
-        <ion-button *ngIf="!error" expand="block" (click)="loadMore(true)" fill="outline">
-            {{ 'core.loadmore' | translate }}
-        </ion-button>
-        <ion-button *ngIf="error" expand="block" (click)="loadMore(true)" fill="outline">
-            {{ 'core.tryagain' | translate }}
-        </ion-button>
-    </div>
-</ng-container>
+@if (!loadingMore && position === 'top') {
+
+    @if (enabled || error) {
+        <div class="ion-padding-horizontal">
+            @if (error) {
+                <ion-button expand="block" (click)="loadMore(true)" fill="outline">
+                    {{ 'core.tryagain' | translate }}
+                </ion-button>
+            } @else {
+                <ion-button expand="block" (click)="loadMore(true)" fill="outline">
+                    {{ 'core.loadmore' | translate }}
+                </ion-button>
+            }
+        </div>
+    }
 
-<div *ngIf="loadingMore && loadingForced" class="ion-padding ion-text-center">
-    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
-</div>
+} @else if (loadingMore && loadingForced) {
+    <div class="ion-padding ion-text-center">
+        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
+    </div>
+}
diff --git a/src/core/components/input-errors/core-input-errors.html b/src/core/components/input-errors/core-input-errors.html
index 2f7da442d91..55cca683779 100644
--- a/src/core/components/input-errors/core-input-errors.html
+++ b/src/core/components/input-errors/core-input-errors.html
@@ -1,22 +1,37 @@
-<ng-container *ngIf="control && control.dirty && !control.valid">
-    <ng-container *ngFor="let error of errorKeys">
-        <div *ngIf="control.hasError(error)" class="core-input-error">
-            <ng-container *ngIf="error !== 'pattern'">
-                <span *ngIf="errorMessages && errorMessages[error]">
-                    <ion-icon *ngIf="error === 'required'" name="fas-circle-exclamation" aria-hidden="true" />
-                    {{ errorMessages[error] | translate }}
-                </span>
-                <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'max' && control.errors?.max">
-                    {{ 'core.login.invalidvaluemax' | translate:{$a: control.errors!.max.max} }}
-                </span>
-                <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'min' && control.errors?.min">
-                    {{ 'core.login.invalidvaluemin' | translate:{$a: control.errors!.min.min} }}
-                </span>
-            </ng-container>
-            <ng-container *ngIf="error === 'pattern' && getPatternErrorMessage() as errorMessage">
-                <span>{{ errorMessage | translate }}</span>
-            </ng-container>
-        </div>
-    </ng-container>
-</ng-container>
-<div *ngIf="errorText" class="core-input-error" aria-live="assertive">{{ errorText }}</div>
+@if (control && control.dirty && !control.valid) {
+
+    @for (error of errorKeys; track error) {
+
+        @if (control.hasError(error)) {
+            <div class="core-input-error">
+                @if (error !== 'pattern') {
+
+                    @if (errorMessages && errorMessages[error]) {
+                        <span>
+                            @if (error === 'required') {
+                                <ion-icon name="fas-circle-exclamation" aria-hidden="true" />
+                            }
+                            {{ errorMessages[error] | translate }}
+                        </span>
+                    } @else if ((!errorMessages || !errorMessages[error]) && error === 'max' && control.errors?.max) {
+                        <span>
+                            {{ 'core.login.invalidvaluemax' | translate:{$a: control.errors!.max.max} }}
+                        </span>
+                    } @else if ((!errorMessages || !errorMessages[error]) && error === 'min' && control.errors?.min) {
+                        <span>
+                            {{ 'core.login.invalidvaluemin' | translate:{$a: control.errors!.min.min} }}
+                        </span>
+                    }
+
+                } @else {
+                    <ng-container *ngIf="getPatternErrorMessage() as errorMessage">
+                        <span>{{ errorMessage | translate }}</span>
+                    </ng-container>
+                }
+            </div>
+        }
+    }
+}
+@if (errorText) {
+    <div class="core-input-error" aria-live="assertive">{{ errorText }}</div>
+}
diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index 7ba101bbd3e..e5180f8cb79 100644
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@@ -1,5 +1,11 @@
-<div class="core-loading-container" *ngIf="!hideUntil" role="status" @coreShowHideAnimation>
-    <ion-spinner aria-hidden="true" />
-    <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
-</div>
-<ng-content *ngIf="loaded" @coreShowHideAnimation />
+@if (!hideUntil) {
+    <div class="core-loading-container" role="status" @coreShowHideAnimation>
+        <ion-spinner aria-hidden="true" />
+        @if (message) {
+            <p class="core-loading-message" role="status">{{message}}</p>
+        }
+    </div>
+}
+@if (loaded) {
+    <ng-content @coreShowHideAnimation />
+}
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index 878d8bd43a5..0f0bfdb1ae3 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -5,46 +5,60 @@
                 <img [src]="fileIcon" [alt]="fileExtension" role="presentation" />
             </ion-thumbnail>
 
-            <ion-label *ngIf="!editMode">
-                <!-- File name and edit button (if editable). -->
-                <p class="item-heading">
-                    <span (ariaButtonClick)="openFile($event)">{{fileName}}</span>
-                </p>
-                <!-- More data about the file. -->
-                <p *ngIf="size || timemodified">
-                    <ng-container *ngIf="size">{{ size }}</ng-container>
-                    <ng-container *ngIf="size && timemodified"> · </ng-container>
-                    <ng-container *ngIf="timemodified">{{ timemodified }}</ng-container>
-                </p>
-            </ion-label>
-
-            <!-- Form to edit the file's name. -->
-            <ion-input type="text" name="filename" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off"
-                (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode"
-                [ariaLabel]="'core.filename' | translate" />
+            @if (!editMode) {
+                <ion-label>
+                    <!-- File name and edit button (if editable). -->
+                    <p class="item-heading">
+                        <span (ariaButtonClick)="openFile($event)">{{fileName}}</span>
+                    </p>
+                    <!-- More data about the file. -->
+                    @if (size || timemodified) {
+                        <p>
+                            @if (size) {
+                                {{ size }}
+                            }
+                            @if (size && timemodified) {
+                                ·
+                            }
+                            @if (timemodified) {
+                                {{ timemodified }}
+                            }
+                        </p>
+                    }
+                </ion-label>
+            } @else {
+                <!-- Form to edit the file's name. -->
+                <ion-input type="text" name="filename" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off"
+                    (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName"
+                    [ariaLabel]="'core.filename' | translate" />
+            }
 
             <div class="buttons" slot="end">
-                <ion-button fill="clear" *ngIf="isIOS && !editMode" (click)="openFile($event, true)"
-                    [ariaLabel]="openButtonLabel | translate">
-                    <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
-                </ion-button>
-
-                <ng-container *ngIf="manage">
-                    <ion-button *ngIf="editMode" fill="clear" [ariaLabel]="'core.save' | translate" color="success"
-                        (click)="changeName(newFileName, $event)">
-                        <ion-icon name="fas-check" slot="icon-only" aria-hidden="true" />
+                @if (isIOS && !editMode) {
+                    <ion-button fill="clear" (click)="openFile($event, true)" [ariaLabel]="openButtonLabel | translate">
+                        <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
                     </ion-button>
+                }
 
-                    <ion-button *ngIf="!editMode" fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
-                        [ariaLabel]="'core.edit' | translate">
-                        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
-                    </ion-button>
+                @if (manage) {
 
-                    <ion-button *ngIf="!editMode" fill="clear" (click)="deleteFile($event)" [ariaLabel]="'core.delete' | translate"
-                        color="danger">
-                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
-                    </ion-button>
-                </ng-container>
+                    @if (editMode) {
+                        <ion-button fill="clear" [ariaLabel]="'core.save' | translate" color="success"
+                            (click)="changeName(newFileName, $event)">
+                            <ion-icon name="fas-check" slot="icon-only" aria-hidden="true" />
+                        </ion-button>
+                    } @else {
+                        <ion-button fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
+                            [ariaLabel]="'core.edit' | translate">
+                            <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
+                        </ion-button>
+
+                        <ion-button fill="clear" (click)="deleteFile($event)" [ariaLabel]="'core.delete' | translate" color="danger">
+                            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
+                        </ion-button>
+                    }
+
+                }
             </div>
         </ion-item>
         <ion-ripple-effect />
diff --git a/src/core/components/mark-required/core-mark-required.html b/src/core/components/mark-required/core-mark-required.html
index 7508d79e317..5893bad7229 100644
--- a/src/core/components/mark-required/core-mark-required.html
+++ b/src/core/components/mark-required/core-mark-required.html
@@ -1,3 +1,5 @@
 <ng-content />
-<ion-icon *ngIf="coreMarkRequired" class="core-input-required-asterisk" name="fas-circle-exclamation" color="danger"
+@if (coreMarkRequired) {
+<ion-icon class="core-input-required-asterisk" name="fas-circle-exclamation" color="danger"
     [attr.aria-label]="requiredLabel" />
+}
diff --git a/src/core/components/message/message.html b/src/core/components/message/message.html
index 2c8d28ac928..eef48258460 100644
--- a/src/core/components/message/message.html
+++ b/src/core/components/message/message.html
@@ -1,43 +1,52 @@
-<div *ngIf="message" class="message-box" (longPress)="copyMessage()">
-    <div class="main">
-        <!-- User data. -->
-        <div class="message-user" *ngIf="message.showUserData">
-            <core-user-avatar slot="start" [user]="user" [courseId]="courseId" [linkProfile]="false" aria-hidden="true" />
-            <div>{{ userFullname }}</div>
-        </div>
-        <div *ngIf="!message.showUserData" class="sr-only">
-            {{ isMine
-            ? ('addon.messages.you' | translate)
-            : userFullname }}
+@if (message) {
+    <div class="message-box" (longPress)="copyMessage()">
+        <div class="main">
+            <!-- User data. -->
+            @if (message.showUserData) {
+                <div class="message-user">
+                    <core-user-avatar slot="start" [user]="user" [courseId]="courseId" [linkProfile]="false" aria-hidden="true" />
+                    <div>{{ userFullname }}</div>
+                </div>
+            } @else {
+                <div class="sr-only">
+                    {{ isMine ? ('addon.messages.you' | translate) : userFullname }}
+                </div>
+            }
+
+            <core-format-text class="message-text" [text]="text" (afterRender)="afterRender.emit()" [contextLevel]="contextLevel"
+                [contextInstanceId]="instanceId" [courseId]="courseId" />
         </div>
 
-        <core-format-text class="message-text" [text]="text" (afterRender)="afterRender.emit()" [contextLevel]="contextLevel"
-            [contextInstanceId]="instanceId" [courseId]="courseId" />
-    </div>
+        <div class="extra">
+            <div class="message-time">
+                @if (message.pending) {
+                    <ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status" />
+                } @else {
+                    @if (message.deleted) {
+                        <ion-icon name="fas-trash" aria-hidden="true" />
+                        <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
+                    } @else {
+                        {{ time | coreFormatDate: 'strftimetime' }}
+                    }
+                }
+            </div>
 
-    <div class="extra">
-        <div class="message-time">
-            <ng-container *ngIf="!message.pending && !message.deleted">
-                {{ time | coreFormatDate: 'strftimetime' }}
-            </ng-container>
-            <ng-container *ngIf="!message.pending && message.deleted">
-                <ion-icon name="fas-trash" aria-hidden="true" />
-                <span class="ion-text-wrap">
-                    {{ 'core.deletedoffline' | translate }}
-                </span>
-            </ng-container>
-            <ion-icon *ngIf="message.pending" name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status" />
+            @if (showDelete && !message.deleted && message.delete !== false) {
+                <ion-button fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="delete($event)"
+                    [ariaLabel]="'addon.messages.deletemessage' | translate" class="delete-button">
+                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
+                </ion-button>
+            }
+            @if (showDelete && message.deleted) {
+                <ion-button fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="undoDelete($event)"
+                    [ariaLabel]="'core.restore' | translate" class="delete-button">
+                    <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
+                </ion-button>
+            }
         </div>
 
-        <ion-button *ngIf="showDelete && !message.deleted && message.delete !== false" fill="clear" [@coreSlideInOut]="'fromRight'"
-            color="danger" (click)="delete($event)" [ariaLabel]="'addon.messages.deletemessage' | translate" class="delete-button">
-            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
-        </ion-button>
-        <ion-button *ngIf="showDelete && message.deleted" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger"
-            (click)="undoDelete($event)" [ariaLabel]="'core.restore' | translate" class="delete-button">
-            <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
-        </ion-button>
+        @if (message.showTail) {
+            <div class="tail"></div>
+        }
     </div>
-
-    <div class="tail" *ngIf="message.showTail"></div>
-</div>
+}
diff --git a/src/core/components/mod-icon/mod-icon.html b/src/core/components/mod-icon/mod-icon.html
index e4266da4a0b..20339368737 100644
--- a/src/core/components/mod-icon/mod-icon.html
+++ b/src/core/components/mod-icon/mod-icon.html
@@ -1,3 +1,6 @@
-<img *ngIf="!isLocalUrl()" [url]="iconUrl()" core-external-content alt="" [component]="linkIconWithComponent() ? modname : null"
-    [componentId]="linkIconWithComponent() ? componentId : null" (error)="loadFallbackIcon()">
-<img *ngIf="isLocalUrl()" [src]="iconUrl()" (error)="loadFallbackIcon()" alt="">
+@if (isLocalUrl()) {
+    <img [src]="iconUrl()" (error)="loadFallbackIcon()" alt="">
+} @else {
+    <img [url]="iconUrl()" core-external-content alt="" [component]="linkIconWithComponent() ? modname : null"
+        [componentId]="linkIconWithComponent() ? componentId : null" (error)="loadFallbackIcon()">
+}
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index dab08f326c4..8f1a9a97706 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,15 +1,19 @@
-<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="items.length > 1">
-    <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="previousIndex < 0" fill="clear" [ariaLabel]="previousTitle" (click)="navigate(previousIndex)">
-            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
-        </ion-button>
-    </ion-col>
-    <ion-col class="ion-text-center">
-        <core-progress-bar [progress]="progress" [text]="progressText" *ngIf="currentIndex >= 0" />
-    </ion-col>
-    <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="nextIndex >= items.length" fill="clear" [ariaLabel]="nextTitle" (click)="navigate(nextIndex)">
-            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
-        </ion-button>
-    </ion-col>
-</ion-row>
+@if (items.length > 1) {
+    <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
+        <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
+            <ion-button [disabled]="previousIndex < 0" fill="clear" [ariaLabel]="previousTitle" (click)="navigate(previousIndex)">
+                <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
+            </ion-button>
+        </ion-col>
+        <ion-col class="ion-text-center">
+            @if (currentIndex >= 0) {
+                <core-progress-bar [progress]="progress" [text]="progressText" />
+            }
+        </ion-col>
+        <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
+            <ion-button [disabled]="nextIndex >= items.length" fill="clear" [ariaLabel]="nextTitle" (click)="navigate(nextIndex)">
+                <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
+            </ion-button>
+        </ion-col>
+    </ion-row>
+}
diff --git a/src/core/components/password-modal/password-modal.html b/src/core/components/password-modal/password-modal.html
index a8c99151d0e..e411d903ada 100644
--- a/src/core/components/password-modal/password-modal.html
+++ b/src/core/components/password-modal/password-modal.html
@@ -20,9 +20,11 @@ <h1>{{ title | translate }}</h1>
                     <ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
                 </ion-input>
             </ion-item>
-            <ion-item *ngIf="error" class="ion-text-wrap ion-padding-top text-danger">
-                <core-format-text [text]="error | translate" />
-            </ion-item>
+            @if (error) {
+                <ion-item class="ion-text-wrap ion-padding-top text-danger">
+                    <core-format-text [text]="error | translate" />
+                </ion-item>
+            }
         </div>
         <ion-button expand="block" type="submit" [disabled]="!password">
             {{ submit | translate }}
diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html
index 5fd316b9953..98b37d9559e 100644
--- a/src/core/components/progress-bar/core-progress-bar.html
+++ b/src/core/components/progress-bar/core-progress-bar.html
@@ -1,11 +1,15 @@
-<ng-container *ngIf="progressNumber >= 0">
+@if (progressNumber >= 0) {
+
     <progress max="100" [value]="progressNumber" role="progressbar" [attr.aria-valuenow]="progressNumber"
         [attr.aria-valuetext]="progressBarValueText" [attr.aria-describedby]="ariaDescribedBy">
     </progress>
     <div class="core-progress-text">
-        <span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span>
+        @if (a11yText) {
+            <span class="sr-only">{{ a11yText | translate }}</span>
+        }
         {{ text }}
     </div>
-</ng-container>
 
-<ion-progress-bar *ngIf="progressNumber < 0" [color]="color" type="indeterminate" />
+} @else {
+    <ion-progress-bar [color]="color" type="indeterminate" />
+}
diff --git a/src/core/components/recaptcha/core-recaptcha.html b/src/core/components/recaptcha/core-recaptcha.html
index 3e96f751d45..66697aea060 100644
--- a/src/core/components/recaptcha/core-recaptcha.html
+++ b/src/core/components/recaptcha/core-recaptcha.html
@@ -1,16 +1,25 @@
 <!-- ReCAPTCHA V2 -->
-<div *ngIf="publicKey && siteUrl && model">
-    <!-- A button to open the recaptcha modal. -->
-    <ion-button expand="block" fill="outline" class="ion-margin" *ngIf="!model[modelValueName]" (click)="answerRecaptcha()">
-        {{ 'core.opensecurityquestion' | translate }}
-    </ion-button>
-    <ion-item *ngIf="model[modelValueName]">
-        <ion-label color="success">{{ 'core.answered' | translate }}</ion-label>
-    </ion-item>
-    <ion-item *ngIf="expired" class="ion-text-wrap core-input-error">
-        <ion-label color="danger">{{ 'core.login.recaptchaexpired' | translate }}</ion-label>
-    </ion-item>
-    <ion-item *ngIf="showRequiredError && !model[modelValueName] && !expired" class="ion-text-wrap core-input-error">
-        <ion-label color="danger">{{ 'core.required' | translate }}</ion-label>
-    </ion-item>
-</div>
+@if (publicKey && siteUrl && model) {
+    <div>
+        @if (model[modelValueName]) {
+            <ion-item>
+                <ion-label color="success">{{ 'core.answered' | translate }}</ion-label>
+            </ion-item>
+        } @else {
+            <!-- A button to open the recaptcha modal. -->
+            <ion-button expand="block" fill="outline" class="ion-margin" (click)="answerRecaptcha()">
+                {{ 'core.opensecurityquestion' | translate }}
+            </ion-button>
+        }
+
+        @if (expired) {
+            <ion-item class="ion-text-wrap core-input-error">
+                <ion-label color="danger">{{ 'core.login.recaptchaexpired' | translate }}</ion-label>
+            </ion-item>
+        } @else if (showRequiredError && !model[modelValueName]) {
+            <ion-item class="ion-text-wrap core-input-error">
+                <ion-label color="danger">{{ 'core.required' | translate }}</ion-label>
+            </ion-item>
+        }
+    </div>
+}
diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html
index 715bd5bf065..0ecf11e54f1 100644
--- a/src/core/components/show-password/core-show-password.html
+++ b/src/core/components/show-password/core-show-password.html
@@ -1,2 +1,4 @@
 <ng-content />
-<ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" *ngIf="!this.ionInput" />
+@if (!this.ionInput) {
+<ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
+}
diff --git a/src/core/components/site-logo/site-logo.html b/src/core/components/site-logo/site-logo.html
index 445eb9c2bb3..37924bdb348 100644
--- a/src/core/components/site-logo/site-logo.html
+++ b/src/core/components/site-logo/site-logo.html
@@ -1,14 +1,29 @@
-<div class="core-logo-container" *ngIf="showLogo && logoLoaded">
-    <img *ngIf="siteLogo" [src]="siteLogo" class="core-logo" [alt]="'core.login.logoof' | translate: { $a: siteName }" core-external-content
-        [siteId]="siteId" (error)="imageError()">
-    <img *ngIf="!siteLogo" [src]="fallbackLogo" class="core-logo" [alt]="'core.login.logoof' | translate: { $a: appName }">
-</div>
+@if (showLogo && logoLoaded) {
+    <div class="core-logo-container">
+        @if (siteLogo) {
+            <img [src]="siteLogo" class="core-logo" [alt]="'core.login.logoof' | translate: { $a: siteName }" core-external-content
+                [siteId]="siteId" (error)="imageError()">
+        } @else {
+            <img [src]="fallbackLogo" class="core-logo" [alt]="'core.login.logoof' | translate: { $a: appName }">
+        }
+    </div>
+}
 
-<p *ngIf="showSiteName && siteNameMode === 'p' && siteName" class="ion-no-margin ion-no-padding core-logo-sitename">
-    <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [siteId]="siteId" />
-</p>
-<core-format-text *ngIf="showSiteName && siteNameMode === '' && siteName" [text]="siteName" contextLevel="system" [contextInstanceId]="0"
-    class="core-logo-sitename" [siteId]="siteId" />
-<h2 *ngIf="showSiteName && siteNameMode === 'h2' && siteName" class="ion-margin-top ion-no-padding core-logo-sitename">
-    <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [siteId]="siteId" />
-</h2>
+@if (showSiteName && siteName) {
+    @switch (siteNameMode) {
+        @case ('p') {
+            <p class="ion-no-margin ion-no-padding core-logo-sitename">
+                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [siteId]="siteId" />
+            </p>
+        }
+        @case ('') {
+            <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-logo-sitename"
+                [siteId]="siteId" />
+        }
+        @case ('h2') {
+            <h2 class="ion-margin-top ion-no-padding core-logo-sitename">
+                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [siteId]="siteId" />
+            </h2>
+        }
+    }
+}
diff --git a/src/core/components/site-picker/core-site-picker.html b/src/core/components/site-picker/core-site-picker.html
index f6ed756fca9..31cfa0a6c2c 100644
--- a/src/core/components/site-picker/core-site-picker.html
+++ b/src/core/components/site-picker/core-site-picker.html
@@ -1,6 +1,10 @@
-<ion-item *ngIf="sites && sites.length">
-    <ion-select [label]="'core.site' | translate" [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)"
-        interface="action-sheet" [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.site' | translate}">
-        <ion-select-option *ngFor="let site of sites" [value]="site.id">{{ site.fullNameAndSiteName }}</ion-select-option>
-    </ion-select>
-</ion-item>
+@if (sites && sites.length) {
+    <ion-item>
+        <ion-select [label]="'core.site' | translate" [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)"
+            interface="action-sheet" [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.site' | translate}">
+            @for (site of sites; track site.id) {
+                <ion-select-option [value]="site.id">{{ site.fullNameAndSiteName }}</ion-select-option>
+            }
+        </ion-select>
+    </ion-item>
+}
diff --git a/src/core/components/sites-list/sites-list.html b/src/core/components/sites-list/sites-list.html
index 890c487643b..aa5e72118b4 100644
--- a/src/core/components/sites-list/sites-list.html
+++ b/src/core/components/sites-list/sites-list.html
@@ -1,38 +1,48 @@
-<ion-list class="core-sites-list" *ngIf="accountsList">
-    <ion-card *ngIf="accountsList.currentSite">
-        <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: accountsList.currentSite, isCurrentSite: true}" />
+@if (accountsList) {
+    <ion-list class="core-sites-list">
+        @if (accountsList.currentSite) {
+            <ion-card>
+                <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: accountsList.currentSite, isCurrentSite: true}" />
 
-        <ng-container *ngTemplateOutlet="siteItem; context: {site: accountsList.currentSite, isCurrentSite: true}" />
+                <ng-container *ngTemplateOutlet="siteItem; context: {site: accountsList.currentSite, isCurrentSite: true}" />
 
-        <ng-container *ngFor="let site of accountsList.sameSite">
-            <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
-        </ng-container>
-    </ion-card>
+                @for (site of accountsList.sameSite; track site.id) {
+                    <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
+                }
+            </ion-card>
+        }
 
-    <ion-card *ngFor="let sites of accountsList.otherSites">
-        <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: sites[0], isCurrentSite: false}" />
+        @for (sites of accountsList.otherSites; track sites[0]?.siteUrl) {
+            <ion-card>
+                <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: sites[0], isCurrentSite: false}" />
 
-        <ng-container *ngFor="let site of sites">
-            <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
-        </ng-container>
-    </ion-card>
+                @for (site of sites; track site.id) {
+                    <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
+                }
+            </ion-card>
+        }
 
-</ion-list>
+    </ion-list>
+}
 
 <!-- Template to render the header of a site card. -->
 <ng-template #siteCardHeader let-site="site" let-isCurrentSite="isCurrentSite">
-    <ion-item-divider sticky="true" *ngIf="site" class="core-sites-list-sitename ion-text-nowrap">
-        <ion-label class="ion-text-nowrap">
-            <h2>
-                <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id" />
-            </h2>
-            <p *ngIf="displaySiteUrl(site)">
-                <a [href]="site.siteUrl" core-link [autoLogin]="!!isCurrentSite">
-                    {{ site.siteUrlWithoutProtocol }}
-                </a>
-            </p>
-        </ion-label>
-    </ion-item-divider>
+    @if (site) {
+        <ion-item-divider sticky="true" class="core-sites-list-sitename ion-text-nowrap">
+            <ion-label class="ion-text-nowrap">
+                <h2>
+                    <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id" />
+                </h2>
+                @if (displaySiteUrl(site)) {
+                    <p>
+                        <a [href]="site.siteUrl" core-link [autoLogin]="!!isCurrentSite">
+                            {{ site.siteUrlWithoutProtocol }}
+                        </a>
+                    </p>
+                }
+            </ion-label>
+        </ion-item-divider>
+    }
 </ng-template>
 
 <!-- Template to render a site item. -->
@@ -44,11 +54,14 @@ <h2>
 
         <ion-label class="ion-text-nowrap">
             <p class="item-heading">{{site.fullname}}</p>
-            <ng-container *ngIf="siteLabelTemplate" [ngTemplateOutlet]="siteLabelTemplate"
-                [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
+            @if (siteLabelTemplate) {
+                <ng-container [ngTemplateOutlet]="siteLabelTemplate"
+                    [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
+            }
         </ion-label>
 
-        <ng-container *ngIf="siteItemTemplate" [ngTemplateOutlet]="siteItemTemplate"
-            [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
+        @if (siteItemTemplate) {
+            <ng-container [ngTemplateOutlet]="siteItemTemplate" [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
+        }
     </ion-item>
 </ng-template>
diff --git a/src/core/components/swipe-slides/swipe-slides.html b/src/core/components/swipe-slides/swipe-slides.html
index aeeff91a2eb..082ef200dec 100644
--- a/src/core/components/swipe-slides/swipe-slides.html
+++ b/src/core/components/swipe-slides/swipe-slides.html
@@ -1,6 +1,11 @@
-<swiper-container #swiperRef *ngIf="loaded" [attr.aria-busy]="activeSlideIndex ? 'true' : null">
-    <swiper-slide *ngFor="let item of items; index as index" [attr.aria-hidden]="!isActive(index)"
-        [attr.tabindex]="!isActive(index) ? -1 : null">
-        <ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}" />
-    </swiper-slide>
-</swiper-container>
+@if (loaded) {
+    <swiper-container #swiperRef [attr.aria-busy]="activeSlideIndex ? 'true' : null">
+        @for (item of items; track manager?.getSource().getItemId(item); let index = $index) {
+            <swiper-slide [attr.aria-hidden]="!isActive(index)" [attr.tabindex]="!isActive(index) ? -1 : null">
+                @if (template) {
+                    <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}" />
+                }
+            </swiper-slide>
+        }
+    </swiper-container>
+}
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index 547935bf55f..d7a85bfbb45 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -1,37 +1,48 @@
 <ion-tabs class="hide-header">
     <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
-        <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
-        <ng-container *ngIf="hideUntil">
+        @if (!hideUntil) {
+            <ion-spinner [attr.aria-label]="'core.loading' | translate" />
+        } @else {
             <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
                 [ariaLabel]="'core.previous' | translate">
-                <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
+                @if (showPrevButton) {
+                    <ion-icon name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
+                }
             </ion-button>
             <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" role="tablist" [attr.aria-label]="description">
-                <ng-container *ngFor="let tab of tabs">
-                    <swiper-slide *ngIf="tab.id" role="presentation" [id]="tab.id + '-tab'" [class.selected]="selected === tab.id"
-                        class="{{tab.class}}">
+                @for (tab of tabs; track tab.id) {
+                    <swiper-slide role="presentation" [id]="tab.id + '-tab'" [class.selected]="selected === tab.id" class="{{tab.class}}">
                         <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
                             (keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" role="tab"
                             [attr.aria-controls]="tab.id" [attr.aria-selected]="selected === tab.id"
                             [tabindex]="selected === tab.id ? 0 : -1">
-                            <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true" />
+                            @if (tab.icon) {
+                                <ion-icon [name]="tab.icon" aria-hidden="true" />
+                            }
                             <ion-label>
                                 <h2>{{ tab.title | translate}}</h2>
-                                <ion-badge *ngIf="tab.badge">
-                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                    </span>
-                                </ion-badge>
+                                @if (tab.badge) {
+                                    <ion-badge>
+                                        <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                        @if (tab.badgeA11yText) {
+                                            <span class="sr-only">
+                                                {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                            </span>
+                                        }
+                                    </ion-badge>
+                                }
                             </ion-label>
                         </ion-tab-button>
                     </swiper-slide>
-                </ng-container>
+                }
             </swiper-container>
             <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
                 [ariaLabel]="'core.next' | translate">
-                <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
+                @if (showNextButton) {
+                    <ion-icon name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
+                }
             </ion-button>
-        </ng-container>
+
+        }
     </ion-tab-bar>
 </ion-tabs>
diff --git a/src/core/components/tabs-outlet/tabs-outlet.ts b/src/core/components/tabs-outlet/tabs-outlet.ts
index fd9dce45de7..110d4dfa09f 100644
--- a/src/core/components/tabs-outlet/tabs-outlet.ts
+++ b/src/core/components/tabs-outlet/tabs-outlet.ts
@@ -51,14 +51,20 @@ import { CorePath } from '@singletons/path';
     templateUrl: 'core-tabs-outlet.html',
     styleUrl: '../tabs/tabs.scss',
 })
-export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutletTab>
+export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutletTabWithId>
     implements AfterViewInit, OnChanges, OnDestroy {
 
     /**
      * Determine tabs layout.
      */
     @Input() layout: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide' = 'icon-hide';
-    @Input() tabs: CoreTabsOutletTab[] = [];
+    @Input({ transform: (tabs?: CoreTabsOutletTab[]): CoreTabsOutletTabWithId[] => {
+        if (!tabs) {
+            return [];
+        }
+
+        return tabs.map((tab) => CoreTabsOutletComponent.formatTab(tab));
+    } }) tabs: CoreTabsOutletTabWithId[] = [];
 
     @ViewChild(IonTabs) protected ionTabs!: IonTabs;
 
@@ -69,12 +75,16 @@ export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutle
      * Init tab info.
      *
      * @param tab Tab.
+     *
+     * @returns Tab with enabled and id.
      */
-    protected initTab(tab: CoreTabsOutletTab): void {
+    protected static formatTab(tab: CoreTabsOutletTab): CoreTabsOutletTabWithId {
         tab.id = tab.id || 'core-tab-outlet-' + CoreUtils.getUniqueId('CoreTabsOutletComponent');
         if (tab.enabled === undefined) {
             tab.enabled = true;
         }
+
+        return tab as CoreTabsOutletTabWithId;
     }
 
     /**
@@ -118,10 +128,6 @@ export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutle
      */
     ngOnChanges(changes: Record<string, SimpleChange>): void {
         if (changes.tabs) {
-            this.tabs.forEach((tab) => {
-                this.initTab(tab);
-            });
-
             this.calculateSlides();
         }
 
@@ -168,7 +174,7 @@ export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutle
     /**
      * @inheritdoc
      */
-    protected calculateInitialTab(): CoreTabsOutletTab | undefined {
+    protected calculateInitialTab(): CoreTabsOutletTabWithId | undefined {
         // Check if a tab should be selected because it was loaded by path.
         const currentPath = CoreNavigator.getCurrentPath();
         const currentPathTab = this.tabs.find(tab => tab.page === currentPath);
@@ -236,3 +242,5 @@ export type CoreTabsOutletTab = CoreTabBase & {
     page: string; // Page to navigate to.
     pageParams?: Params; // Page params.
 };
+
+export type CoreTabsOutletTabWithId = Omit<CoreTabsOutletTab, 'id'> & { id: string };
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index 9c97fcaca53..b0244895dac 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -1,36 +1,50 @@
 <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
-    <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
-    <ng-container *ngIf="hideUntil">
+    @if (!hideUntil) {
+        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
+    } @else {
+
         <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
             [ariaLabel]="'core.previous' | translate">
-            <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
+            @if (showPrevButton) {
+                <ion-icon name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
+            }
         </ion-button>
         <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" role="tablist" [attr.aria-label]="description">
-            <ng-container *ngFor="let tab of tabs">
-                <swiper-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected === tab.id"
-                    class="{{tab.class}}">
-                    <ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
-                        (keyup)="tabAction.keyUp(tab.id, $event)" [layout]="layout" role="tab" [attr.aria-controls]="tab.id"
-                        [attr.aria-selected]="selected === tab.id" [tabindex]="selected === tab.id ? 0 : -1">
-                        <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true" />
-                        <ion-label>
-                            <h2>{{ tab.title | translate}}</h2>
-                            <ion-badge *ngIf="tab.badge">
-                                <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                    {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                </span>
-                            </ion-badge>
-                        </ion-label>
-                    </ion-tab-button>
-                </swiper-slide>
-            </ng-container>
+            @for (tab of tabs; track tab.id) {
+                @if (tab.enabled) {
+                    <swiper-slide role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected === tab.id" class="{{tab.class}}">
+                        <ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
+                            (keyup)="tabAction.keyUp(tab.id, $event)" [layout]="layout" role="tab" [attr.aria-controls]="tab.id"
+                            [attr.aria-selected]="selected === tab.id" [tabindex]="selected === tab.id ? 0 : -1">
+                            @if (tab.icon) {
+                                <ion-icon [name]="tab.icon" aria-hidden="true" />
+                            }
+                            <ion-label>
+                                <h2>{{ tab.title | translate}}</h2>
+                                @if (tab.badge) {
+                                    <ion-badge>
+                                        <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                        @if (tab.badgeA11yText) {
+                                            <span class="sr-only">
+                                                {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                            </span>
+                                        }
+                                    </ion-badge>
+                                }
+                            </ion-label>
+                        </ion-tab-button>
+                    </swiper-slide>
+                }
+            }
         </swiper-container>
         <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
             [ariaLabel]="'core.next' | translate">
-            <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
+            @if (showNextButton) {
+                <ion-icon name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
+            }
         </ion-button>
-    </ng-container>
+
+    }
 </ion-tab-bar>
 <div class="core-tabs-content-container" #originalTabs>
     <ng-content />
diff --git a/src/core/components/tabs/tab.ts b/src/core/components/tabs/tab.ts
index b88dd6169cc..91b81406076 100644
--- a/src/core/components/tabs/tab.ts
+++ b/src/core/components/tabs/tab.ts
@@ -41,7 +41,7 @@ import { CoreTabsComponent } from './tabs';
  */
 @Component({
     selector: 'core-tab',
-    template: '<ng-container *ngIf="loaded && template" [ngTemplateOutlet]="template" />',
+    template: '@if (loaded && template) {<ng-container [ngTemplateOutlet]="template" />}',
 })
 export class CoreTabComponent implements OnInit, OnDestroy, CoreTabBase {
 
diff --git a/src/core/components/timer/core-timer.html b/src/core/components/timer/core-timer.html
index 705d12f014b..d4f0aad3cc0 100644
--- a/src/core/components/timer/core-timer.html
+++ b/src/core/components/timer/core-timer.html
@@ -1,32 +1,49 @@
-<ng-container *ngIf="timeLeft !== undefined">
-    <ion-item *ngIf="mode !== modeBasic" class="core-timer" role="timer" [attr.aria-label]="timerText">
-        <ion-label class="ion-justify-content-{{align}}">
-            <ng-container *ngTemplateOutlet="timerTemplate" />
-        </ion-label>
-    </ion-item>
+@if (timeLeft !== undefined) {
 
-    <div *ngIf="mode === modeBasic" class="core-timer ion-padding ion-justify-content-{{align}}" role="timer" [attr.aria-label]="timerText">
-        <ng-container *ngTemplateOutlet="timerTemplate" />
-    </div>
+    @if (mode !== modeBasic) {
+        <ion-item class="core-timer" role="timer" [attr.aria-label]="timerText">
+            <ion-label class="ion-justify-content-{{align}}">
+                <ng-container *ngTemplateOutlet="timerTemplate" />
+            </ion-label>
+        </ion-item>
+    } @else {
+        <div class="core-timer ion-padding ion-justify-content-{{align}}" role="timer" [attr.aria-label]="timerText">
+            <ng-container *ngTemplateOutlet="timerTemplate" />
+        </div>
+    }
 
     <ng-template #timerTemplate>
-        <ng-container *ngIf="timeLeft > 0">
+        @if (timeLeft > 0) {
+
             <div class="ion-text-wrap">
-                <span *ngIf="timerText" class="core-timer-text">{{ timerText }}</span>
-                <span *ngIf="showTimeLeft" class="core-timer-time-left">
-                    {{ timeLeft | coreSecondsToHMS }}
-                </span>
+                @if (timerText) {
+                    <span class="core-timer-text">{{ timerText }}</span>
+                }
+                @if (showTimeLeft) {
+                    <span class="core-timer-time-left">
+                        {{ timeLeft | coreSecondsToHMS }}
+                    </span>
+                }
             </div>
 
-            <div *ngIf="hidable" class="core-timer-visibility">
-                ( <button class="as-link" *ngIf="showTimeLeft" (click)="toggleTimeLeftVisibility()">{{ 'core.hide' | translate }}</button>
-                <button class="as-link" *ngIf="!showTimeLeft" (click)="toggleTimeLeftVisibility()">{{ 'core.show' | translate }}</button> )
+            @if (hidable) {
+                <div class="core-timer-visibility">
+                    ( @if (showTimeLeft) {
+                        <button class="as-link" (click)="toggleTimeLeftVisibility()">{{ 'core.hide' | translate }}</button>
+                    } @else {
+                        <button class="as-link" (click)="toggleTimeLeftVisibility()">{{ 'core.show' | translate }}</button>
+                    } )
+                </div>
+            }
+        } @else {
+            <div class="core-timesup">
+                @if (timeUpText) {
+                    {{ timeUpText }}
+                } @else {
+                    {{ 'core.timesup' | translate }}
+                }
             </div>
-        </ng-container>
-
-        <div class="core-timesup" *ngIf="timeLeft <= 0">
-            <ng-container *ngIf="timeUpText">{{ timeUpText }}</ng-container>
-            <ng-container *ngIf="!timeUpText">{{ 'core.timesup' | translate }}</ng-container>
-        </div>
+        }
     </ng-template>
-</ng-container>
+
+}
diff --git a/src/core/components/user-avatar/core-user-avatar.html b/src/core/components/user-avatar/core-user-avatar.html
index 250dba9a92c..8e7b926a9aa 100644
--- a/src/core/components/user-avatar/core-user-avatar.html
+++ b/src/core/components/user-avatar/core-user-avatar.html
@@ -1,24 +1,33 @@
-<ng-container *ngIf="avatarUrl">
-    <img class="userpicture" *ngIf="linkProfile" [url]="avatarUrl" [alt]="fullname" core-external-content (error)="loadImageError()"
-        (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId">
+@if (avatarUrl) {
 
-    <img class="userpicture" *ngIf="!linkProfile" [url]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}"
-        core-external-content (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
-</ng-container>
-<ng-container *ngIf="!avatarUrl && initials">
-    <div class="userinitials" *ngIf="linkProfile" [attr.aria-label]="fullname" [title]="fullname" (ariaButtonClick)="gotoProfile($event)"
-        [attr.data-initials]="initials">
-    </div>
+    @if (linkProfile) {
+        <img class="userpicture" [url]="avatarUrl" [alt]="fullname" core-external-content (error)="loadImageError()"
+            (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId">
+    } @else {
+        <img class="userpicture" [url]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
+            (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
+    }
 
-    <div class="userinitials" *ngIf="!linkProfile" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
-        [title]="'core.pictureof' | translate:{$a: fullname}" role="img" [attr.data-initials]="initials" aria-hidden="true">
-    </div>
-</ng-container>
-<ng-container *ngIf="!avatarUrl && !initials"><!-- During loading -->
+} @else if (!avatarUrl && initials) {
+
+    @if (linkProfile) {
+        <div class="userinitials" [attr.aria-label]="fullname" [title]="fullname" (ariaButtonClick)="gotoProfile($event)"
+            [attr.data-initials]="initials">
+        </div>
+    } @else {
+        <div class="userinitials" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
+            [title]="'core.pictureof' | translate:{$a: fullname}" role="img" [attr.data-initials]="initials" aria-hidden="true">
+        </div>
+    }
+
+} @else {
+    <!-- During loading -->
     <img class="userpicture_loading" src="assets/img/user-avatar.png" role="presentation" aria-hidden="true" alt="">
-</ng-container>
+}
 
-<span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
-</span>
+@if (checkOnline && isOnline()) {
+    <span class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
+    </span>
+}
 
 <ng-content />