diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 2442fe5acc9..18089df6fea 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -2,6 +2,7 @@
     "recommendations": [
         "ionic.ionic",
         "dbaeumer.vscode-eslint",
-        "angular.ng-template"
+        "angular.ng-template",
+        "nesterenok.js-beautify-extentions",
     ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d0ad3fae64d..ef21db2f2be 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,7 +5,7 @@
      */
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "[html]": {
-        "editor.defaultFormatter": "vscode.html-language-features",
+        "editor.defaultFormatter": "nesterenok.js-beautify-extentions",
     },
     "editor.formatOnSave": true,
     "eslint.format.enable": true,
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 1f55dd71a34..40bbd55414b 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -10,9 +10,9 @@ <h3>
     <ion-item>
         <ion-label>
             @if (course) {
-            <h3><ng-container *ngTemplateOutlet="date" /></h3>
+                <h3><ng-container *ngTemplateOutlet="date" /></h3>
             } @else {
-            <h4><ng-container *ngTemplateOutlet="date" /></h4>
+                <h4><ng-container *ngTemplateOutlet="date" /></h4>
             }
             <ng-template #date>
                 {{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}
diff --git a/src/addons/blog/pages/edit-entry/edit-entry.html b/src/addons/blog/pages/edit-entry/edit-entry.html
index 824644ea028..3b2123277e1 100644
--- a/src/addons/blog/pages/edit-entry/edit-entry.html
+++ b/src/addons/blog/pages/edit-entry/edit-entry.html
@@ -40,35 +40,35 @@ <h1>{{ entry ? entry.subject : 'addon.blog.addnewentry' | translate }}</h1>
                 [componentId]="entry?.id ?? 0" />
 
             @if (courseId && associatedCourse) {
-            <ion-item class="divider section" (click)="toggleAssociations()" button [detail]="false"
-                [attr.aria-label]="(associationsExpanded ? 'core.collapse' : 'core.expand') | translate"
-                [attr.aria-expanded]="associationsExpanded" aria-controls="addon-blog-associations"
-                [class.expandable-status-icon-expanded]="associationsExpanded">
-                <ion-icon [name]="associationsExpanded ? 'fas-chevron-down' : 'fas-chevron-right'" flip-rtl slot="start"
-                    class="expandable-status-icon" />
-                <ion-label>
-                    <h2>{{ 'addon.blog.associations' | translate }}</h2>
-                </ion-label>
-            </ion-item>
-            <div id="addon-blog-associations">
-                @if (associationsExpanded) {
-                <ion-item>
-                    @if (associatedModule) {
-                    <ion-toggle formControlName="associateWithModule">
-                        <core-format-text [text]="'addon.blog.associatewithmodule' | translate: {
+                <ion-item class="divider section" (click)="toggleAssociations()" button [detail]="false"
+                    [attr.aria-label]="(associationsExpanded ? 'core.collapse' : 'core.expand') | translate"
+                    [attr.aria-expanded]="associationsExpanded" aria-controls="addon-blog-associations"
+                    [class.expandable-status-icon-expanded]="associationsExpanded">
+                    <ion-icon [name]="associationsExpanded ? 'fas-chevron-down' : 'fas-chevron-right'" flip-rtl slot="start"
+                        class="expandable-status-icon" />
+                    <ion-label>
+                        <h2>{{ 'addon.blog.associations' | translate }}</h2>
+                    </ion-label>
+                </ion-item>
+                <div id="addon-blog-associations">
+                    @if (associationsExpanded) {
+                        <ion-item>
+                            @if (associatedModule) {
+                                <ion-toggle formControlName="associateWithModule">
+                                    <core-format-text [text]="'addon.blog.associatewithmodule' | translate: {
                             $a: { modtype: associatedModule.modname, modname: associatedModule.name }
                             }" [contextLevel]="moduleContext" [contextInstanceId]="modId" [courseId]="courseId" />
-                    </ion-toggle>
-                    } @else if (associatedCourse) {
-                    <ion-toggle formControlName="associateWithCourse">
-                        <core-format-text
-                            [text]="'addon.blog.associatewithcourse' | translate: { $a: { coursename: associatedCourse.fullname } }"
-                            [contextLevel]="courseContext" [contextInstanceId]="courseId" [courseId]="courseId" />
-                    </ion-toggle>
+                                </ion-toggle>
+                            } @else if (associatedCourse) {
+                                <ion-toggle formControlName="associateWithCourse">
+                                    <core-format-text
+                                        [text]="'addon.blog.associatewithcourse' | translate: { $a: { coursename: associatedCourse.fullname } }"
+                                        [contextLevel]="courseContext" [contextInstanceId]="courseId" [courseId]="courseId" />
+                                </ion-toggle>
+                            }
+                        </ion-item>
                     }
-                </ion-item>
-                }
-            </div>
+                </div>
             }
 
             <ion-button class="ion-margin" expand="block" [ariaLabel]="'core.save' | translate"
diff --git a/src/addons/blog/pages/index/index.html b/src/addons/blog/pages/index/index.html
index b3efd571f2e..3dc0e98edd6 100644
--- a/src/addons/blog/pages/index/index.html
+++ b/src/addons/blog/pages/index/index.html
@@ -25,122 +25,124 @@ <h1>{{ title | translate }}</h1>
 
     <core-loading [hideUntil]="loaded()">
         @if (showMyEntriesToggle) {
-        <ion-item class="ion-text-wrap">
-            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">
-                {{ 'addon.blog.showonlyyourentries' | translate }}
-            </ion-toggle>
-        </ion-item>
+            <ion-item class="ion-text-wrap">
+                <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">
+                    {{ 'addon.blog.showonlyyourentries' | translate }}
+                </ion-toggle>
+            </ion-item>
         }
 
         @if (hasOfflineDataToSync()) {
-        <ion-card class="core-warning-card">
-            <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
-                <ion-label>{{ 'core.hasdatatosync' | translate:{ $a: 'addon.blog.blog' | translate } }}</ion-label>
-            </ion-item>
-        </ion-card>
+            <ion-card class="core-warning-card">
+                <ion-item>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
+                    <ion-label>{{ 'core.hasdatatosync' | translate:{ $a: 'addon.blog.blog' | translate } }}</ion-label>
+                </ion-item>
+            </ion-card>
         }
 
         @for (entry of entries; track getEntryTemplateId(entry)) {
-        <div class="entry ion-padding-start ion-padding-top ion-padding-end" [id]="getEntryTemplateId(entry)">
-            <div class="entry-subject flex ion-text-wrap ion-justify-content-between ion-align-items-center">
-                <h3>
-                    <core-format-text [text]="entry.subject" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                        [courseId]="entry.courseid" />
-                    @if (entry.userid === currentUserId && entry.publishTranslated === 'publishtonoone') {
-                    <span class="entry-draft">
-                        <ion-badge color="warning"> {{ 'addon.blog.publishtonoone' | translate }} </ion-badge>
-                    </span>
+            <div class="entry ion-padding-start ion-padding-top ion-padding-end" [id]="getEntryTemplateId(entry)">
+                <div class="entry-subject flex ion-text-wrap ion-justify-content-between ion-align-items-center">
+                    <h3>
+                        <core-format-text [text]="entry.subject" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
+                            [courseId]="entry.courseid" />
+                        @if (entry.userid === currentUserId && entry.publishTranslated === 'publishtonoone') {
+                            <span class="entry-draft">
+                                <ion-badge color="warning"> {{ 'addon.blog.publishtonoone' | translate }} </ion-badge>
+                            </span>
+                        }
+
+                        @if (!getEntryId(entry) || entry.updatedOffline) {
+                            <span class="entry-draft">
+                                <ion-badge color="light">
+                                    <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
+                                    {{ 'core.notsent' | translate }}
+                                </ion-badge>
+                            </span>
+                        }
+                    </h3>
+
+                    @if (entry.userid === currentUserId && optionsAvailable && !entry.deleted) {
+                        <ion-button fill="clear" [ariaLabel]="'core.displayoptions' | translate"
+                            (click)="showEntryActionsPopover($event, entry)" class="entry-options">
+                            <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
+                        </ion-button>
                     }
 
-                    @if (!getEntryId(entry) || entry.updatedOffline) {
-                    <span class="entry-draft">
-                        <ion-badge color="light">
-                            <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
-                            {{ 'core.notsent' | translate }}
-                        </ion-badge>
-                    </span>
+                    @if (entry.deleted) {
+                        <ion-button slot="end" fill="clear" color="danger" (click)="undoDelete(entry)"
+                            [ariaLabel]="'core.restore' | translate">
+                            <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
+                        </ion-button>
                     }
-                </h3>
-
-                @if (entry.userid === currentUserId && optionsAvailable && !entry.deleted) {
-                <ion-button fill="clear" [ariaLabel]="'core.displayoptions' | translate" (click)="showEntryActionsPopover($event, entry)"
-                    class="entry-options">
-                    <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
-                </ion-button>
-                }
-
-                @if (entry.deleted) {
-                <ion-button slot="end" fill="clear" color="danger" (click)="undoDelete(entry)" [ariaLabel]="'core.restore' | translate">
-                    <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
-                </ion-button>
-                }
-            </div>
-
-            <div class="entry-creation-info flex ion-align-items-center">
-                <div class="entry-avatar">
-                    <core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
                 </div>
 
-                @if (entry.user?.fullname && entry.created) {
-                <span [innerHTML]="'core.bynameondate' | translate: {
+                <div class="entry-creation-info flex ion-align-items-center">
+                    <div class="entry-avatar">
+                        <core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
+                    </div>
+
+                    @if (entry.user?.fullname && entry.created) {
+                        <span [innerHTML]="'core.bynameondate' | translate: {
                     '$a': { name: '<strong>' + entry.user?.fullname + '</strong>', date: (entry.created | coreDateDayOrTime) }
                 }"></span>
-                } @else if (!entry.user?.fullname && entry.created) {
-                <span>{{ entry.created | coreDateDayOrTime }}</span>
-                }
-            </div>
-
-            <div class="entry-summary" [collapsible-item]="64">
-                <div class="ion-margin-bottom">
-                    <core-format-text [text]="entry.summary" [component]="component" [componentId]="getEntryId(entry)"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
+                    } @else if (!entry.user?.fullname && entry.created) {
+                        <span>{{ entry.created | coreDateDayOrTime }}</span>
+                    }
                 </div>
 
-                @if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
-                <ion-item class="ion-text-wrap" lines="none">
-                    <ion-label>
-                        <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
-                        <core-tag-list [tags]="entry.tags" />
-                    </ion-label>
-                </ion-item>
-                }
+                <div class="entry-summary" [collapsible-item]="64">
+                    <div class="ion-margin-bottom">
+                        <core-format-text [text]="entry.summary" [component]="component" [componentId]="getEntryId(entry)"
+                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
+                    </div>
+
+                    @if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
+                        <ion-item class="ion-text-wrap" lines="none">
+                            <ion-label>
+                                <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
+                                <core-tag-list [tags]="entry.tags" />
+                            </ion-label>
+                        </ion-item>
+                    }
 
-                <core-files [files]="entry.attachmentfiles" [component]="component" [componentId]="getEntryId(entry) ?? entry.created" />
+                    <core-files [files]="entry.attachmentfiles" [component]="component"
+                        [componentId]="getEntryId(entry) ?? entry.created" />
 
-                @if (entry.uniquehash) {
-                <ion-item [href]="entry.uniquehash" core-link [detail]="true" lines="none">
-                    <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
-                </ion-item>
-                }
-            </div>
+                    @if (entry.uniquehash) {
+                        <ion-item [href]="entry.uniquehash" core-link [detail]="true" lines="none">
+                            <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
+                        </ion-item>
+                    }
+                </div>
 
-            @if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
-            <ion-item class="entry-last-modification" lines="none">
-                @if (entry.lastmodified > entry.created) {
-                <ion-note class="flex ion-align-items-center" slot="start">
-                    <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
-                    {{ entry.lastmodified | coreTimeAgo }}
-                </ion-note>
+                @if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
+                    <ion-item class="entry-last-modification" lines="none">
+                        @if (entry.lastmodified > entry.created) {
+                            <ion-note class="flex ion-align-items-center" slot="start">
+                                <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
+                                {{ entry.lastmodified | coreTimeAgo }}
+                            </ion-note>
+                        }
+
+                        @if (entry.userid === currentUserId && entry.publishstate !== 'draft') {
+                            <ion-badge class="entry-visibility-permission" color="success" slot="end">
+                                <ion-icon name="fas-eye" />
+                                {{ 'addon.blog.' + entry.publishTranslated | translate }}
+                            </ion-badge>
+                        }
+                    </ion-item>
                 }
 
-                @if (entry.userid === currentUserId && entry.publishstate !== 'draft') {
-                <ion-badge class="entry-visibility-permission" color="success" slot="end">
-                    <ion-icon name="fas-eye" />
-                    {{ 'addon.blog.' + entry.publishTranslated | translate }}
-                </ion-badge>
+                @if (getEntryId(entry) && commentsEnabled) {
+                    <core-comments [component]="this.component" [itemId]="getEntryId(entry)" area="format_blog" [instanceId]="entry.userid"
+                        contextLevel="user" [showItem]="true" [courseId]="entry.courseid" />
                 }
-            </ion-item>
-            }
-
-            @if (getEntryId(entry) && commentsEnabled) {
-            <core-comments [component]="this.component" [itemId]="getEntryId(entry)" area="format_blog" [instanceId]="entry.userid"
-                contextLevel="user" [showItem]="true" [courseId]="entry.courseid" />
-            }
 
-        </div>
+            </div>
         } @empty {
-        <core-empty-box icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate" />
+            <core-empty-box icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate" />
         }
 
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError" />
@@ -149,12 +151,12 @@ <h3>
 
     <!-- Create a blog entry. -->
     @if ((filter.userid === currentUserId || showMyEntriesToggle) && loaded() && optionsAvailable) {
-    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
-        <ion-fab-button (click)="createNewEntry()" [attr.aria-label]="'addon.blog.addnewentry' | translate">
-            <ion-icon name="fas-pen-to-square" aria-hidden="true" />
-            <span class="sr-only">{{ 'addon.blog.addnewentry' | translate }}</span>
-        </ion-fab-button>
-    </ion-fab>
+        <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
+            <ion-fab-button (click)="createNewEntry()" [attr.aria-label]="'addon.blog.addnewentry' | translate">
+                <ion-icon name="fas-pen-to-square" aria-hidden="true" />
+                <span class="sr-only">{{ 'addon.blog.addnewentry' | translate }}</span>
+            </ion-fab-button>
+        </ion-fab>
     }
 
 </ion-content>
diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index 0ab1a16dc3d..6a10bac2d50 100644
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@@ -30,56 +30,56 @@ <h2>{{ 'core.settings.general' | translate }}</h2>
         </ion-card>
 
         @if (warningMessage()) {
-        <ion-card class="core-warning-card ion-margin-top">
-            <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
-                <ion-label>{{ warningMessage() }}</ion-label>
-            </ion-item>
-        </ion-card>
+            <ion-card class="core-warning-card ion-margin-top">
+                <ion-item>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
+                    <ion-label>{{ warningMessage() }}</ion-label>
+                </ion-item>
+            </ion-card>
         } @else {
-        <!-- Contactable privacy. -->
-        <ion-card>
-            <ion-item *ngIf="!advancedContactable" class="ion-text-wrap">
-                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
-                    {{ 'addon.messages.blocknoncontacts' | translate }}
-                </ion-toggle>
-            </ion-item>
+            <!-- Contactable privacy. -->
+            <ion-card>
+                <ion-item *ngIf="!advancedContactable" class="ion-text-wrap">
+                    <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
+                        {{ 'addon.messages.blocknoncontacts' | translate }}
+                    </ion-toggle>
+                </ion-item>
 
-            <ion-list *ngIf="advancedContactable">
-                <ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
-                    <ion-item-divider>
-                        <ion-label>
-                            <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
-                        </ion-label>
-                    </ion-item-divider>
-                    <ion-item class="ion-text-wrap">
-                        <ion-radio labelPlacement="end" justify="start" [value]="onlyContactsValue">
-                            {{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}
-                        </ion-radio>
-                    </ion-item>
-                    <ion-item class="ion-text-wrap">
-                        <ion-radio labelPlacement="end" justify="start" [value]="courseMemberValue">
-                            {{ 'addon.messages.contactableprivacy_coursemember' | translate }}
-                        </ion-radio>
-                    </ion-item>
-                    <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
-                        <ion-radio labelPlacement="end" justify="start" [value]="siteValue">
-                            {{ 'addon.messages.contactableprivacy_site' | translate }}
-                        </ion-radio>
-                    </ion-item>
-                </ion-radio-group>
-            </ion-list>
-        </ion-card>
+                <ion-list *ngIf="advancedContactable">
+                    <ion-radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
+                        <ion-item-divider>
+                            <ion-label>
+                                <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
+                            </ion-label>
+                        </ion-item-divider>
+                        <ion-item class="ion-text-wrap">
+                            <ion-radio labelPlacement="end" justify="start" [value]="onlyContactsValue">
+                                {{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}
+                            </ion-radio>
+                        </ion-item>
+                        <ion-item class="ion-text-wrap">
+                            <ion-radio labelPlacement="end" justify="start" [value]="courseMemberValue">
+                                {{ 'addon.messages.contactableprivacy_coursemember' | translate }}
+                            </ion-radio>
+                        </ion-item>
+                        <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
+                            <ion-radio labelPlacement="end" justify="start" [value]="siteValue">
+                                {{ 'addon.messages.contactableprivacy_site' | translate }}
+                            </ion-radio>
+                        </ion-item>
+                    </ion-radio-group>
+                </ion-list>
+            </ion-card>
 
-        <!-- Notifications. -->
-        <ng-container *ngIf="preferences">
-            <ng-container *ngIf="!groupMessagingEnabled">
-                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
-            </ng-container>
-            <ng-container *ngIf="groupMessagingEnabled">
-                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
+            <!-- Notifications. -->
+            <ng-container *ngIf="preferences">
+                <ng-container *ngIf="!groupMessagingEnabled">
+                    <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
+                </ng-container>
+                <ng-container *ngIf="groupMessagingEnabled">
+                    <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
+                </ng-container>
             </ng-container>
-        </ng-container>
         }
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index 9d4f2f619db..d591b878a02 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index bebbd40335d..317802aa373 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/book/components/index/addon-mod-book-index.html b/src/addons/mod/book/components/index/addon-mod-book-index.html
index 67a665edf3c..a827584a759 100644
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/chat/components/index/addon-mod-chat-index.html b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
index d722b32f5f3..8ba9fdee3d2 100644
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index 5c4bc6e6666..6995a171dec 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index b33b0b95644..79cfd651d04 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -10,15 +10,15 @@
             (action)="gotoEntry(firstEntry)" />
 
         @if (courseContentsPage) {
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
         }
     </core-context-menu>
 
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index 25a9e956e9e..64250d0d0ee 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
index 7a92a9bcfb1..29727f326c6 100644
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index df3ce64059c..641ced3446a 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -5,17 +5,17 @@
     </ion-button>
 
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
 
-    <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
-    <core-context-menu />
+        <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
+        <core-context-menu />
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index eb7ff23a48a..6f12f791ee5 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -10,14 +10,14 @@
     </ion-button>
 
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index 269e511059c..593f63d4551 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -8,15 +8,15 @@
             (action)="viewAllAttempts()" iconAction="fas-chart-bar" />
 
         @if (courseContentsPage) {
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
         }
     </core-context-menu>
 
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     }
 </core-navbar-buttons>
 
@@ -29,18 +29,18 @@
 
     <!-- User tried to play in offline a package that must be played in online. -->
     @if (triedToPlay && !isOnline && (!siteCanDownload || hasMissingDependencies)) {
-    <ion-card class="core-warning-card">
-        <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
-            <ion-label>
-                @if (!siteCanDownload) {
-                {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }}
-                } @else {
-                {{ 'core.course.activitynotavailableoffline' | translate }} {{ 'core.needinternettoaccessit' | translate }}
-                }
-            </ion-label>
-        </ion-item>
-    </ion-card>
+        <ion-card class="core-warning-card">
+            <ion-item>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
+                <ion-label>
+                    @if (!siteCanDownload) {
+                        {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }}
+                    } @else {
+                        {{ 'core.course.activitynotavailableoffline' | translate }} {{ 'core.needinternettoaccessit' | translate }}
+                    }
+                </ion-label>
+            </ion-item>
+        </ion-card>
     }
 
     <!-- Preview mode. -->
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index d01c4c51e1e..0298bf2a875 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index b87d2774c4f..5926d0ab74c 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/lti/components/index/addon-mod-lti-index.html b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
index 08debe14940..7b1b6a72131 100644
--- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/page/components/index/addon-mod-page-index.html b/src/addons/mod/page/components/index/addon-mod-page-index.html
index eb99ae3e66f..44a6193f667 100644
--- a/src/addons/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addons/mod/page/components/index/addon-mod-page-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/quiz/components/attempt-state/attempt-state.html b/src/addons/mod/quiz/components/attempt-state/attempt-state.html
index eeedb87678e..fddd1a4262c 100644
--- a/src/addons/mod/quiz/components/attempt-state/attempt-state.html
+++ b/src/addons/mod/quiz/components/attempt-state/attempt-state.html
@@ -1,6 +1,6 @@
 <ion-badge [color]="color">
     @if (finishedOffline) {
-    <ion-icon name="fas-clock" aria-hidden="true" />
+        <ion-icon name="fas-clock" aria-hidden="true" />
     }
     {{ readableState }}
 </ion-badge>
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index fc556d75e3b..a58b4cf2b3f 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
@@ -53,121 +53,122 @@
 
     <!-- List of user attempts. -->
     @if (quiz && attempts.length) {
-    <ion-card class="addon-mod_quiz-attempts-summary">
-        <ion-card-header class="ion-text-wrap">
-            <ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
-        </ion-card-header>
-
-        <!-- Quiz result info. -->
-        @if (quiz && showResults && (gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))) {
-
-        @if (overallStats && gradeResult) {
-        <ion-item class="ion-text-wrap addon-mod_quiz-grade-result">
-            <ion-label>
-                <div class="addon-mod_quiz-grade-result-grade">
-                    @if (moreAttempts) {
-                    <span>{{ gradeMethodReadable }}</span>
-                    <span>{{ gradeResult }}</span>
-                    } @else {
-                    <span>{{ 'addon.mod_quiz.yourfinalgradeis' | translate:{ $a: gradeResult } }}</span>
-                    }
-                </div>
-
-                @if (gradeOverridden) {
-                <p class="addon-mod_quiz-grade-overridden-notice">
-                    <ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
-                    {{ 'core.course.overriddennotice' | translate }}
-                </p>
+        <ion-card class="addon-mod_quiz-attempts-summary">
+            <ion-card-header class="ion-text-wrap">
+                <ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
+            </ion-card-header>
+
+            <!-- Quiz result info. -->
+            @if (quiz && showResults && (gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))) {
+
+                @if (overallStats && gradeResult) {
+                    <ion-item class="ion-text-wrap addon-mod_quiz-grade-result">
+                        <ion-label>
+                            <div class="addon-mod_quiz-grade-result-grade">
+                                @if (moreAttempts) {
+                                    <span>{{ gradeMethodReadable }}</span>
+                                    <span>{{ gradeResult }}</span>
+                                } @else {
+                                    <span>{{ 'addon.mod_quiz.yourfinalgradeis' | translate:{ $a: gradeResult } }}</span>
+                                }
+                            </div>
+
+                            @if (gradeOverridden) {
+                                <p class="addon-mod_quiz-grade-overridden-notice">
+                                    <ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
+                                    {{ 'core.course.overriddennotice' | translate }}
+                                </p>
+                            }
+                        </ion-label>
+                    </ion-item>
                 }
-            </ion-label>
-        </ion-item>
-        }
-
-        @if (gradebookFeedback) {
-        <ion-item class="ion-text-wrap addon-mod_quiz-gradebook-feedback">
-            <ion-label>
-                <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
-                <p>
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback" contextLevel="module"
-                        [contextInstanceId]="module.id" [courseId]="courseId" />
-                </p>
-            </ion-label>
-        </ion-item>
-        }
-
-        @if (quiz.showFeedback && overallFeedback) {
-        <hr>
-        <ion-item class="ion-text-wrap addon-mod_quiz-overall-feedback">
-            <ion-label>
-                <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
-                <p>
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
-                        [contextInstanceId]="module.id" [courseId]="courseId" />
-                </p>
-            </ion-label>
-        </ion-item>
-        }
-
-        }
-
-        <ion-accordion-group>
-            @for (attempt of attempts; track attempt.id) {
-            <ion-accordion [value]="attempt.id" toggleIconSlot="start">
-                <ion-item slot="header" class="ion-text-wrap addon-mod_quiz-attempt-title" lines="none">
-                    <ion-label>
-                        <h3>{{ 'addon.mod_quiz.attempt' | translate:{ $a: attempt.attempt } }}</h3>
-                    </ion-label>
-                    <div slot="end" class="addon-mod_quiz-attempt-title-info">
-                        <addon-mod-quiz-attempt-state [state]="attempt.state" [finishedOffline]="attempt.finishedOffline" />
-                        @if (attempt.finished && quiz.showAttemptsGrades) {
-                        @if (attempt.rescaledGrade !== undefined && attempt.rescaledGrade >= 0) {
-                        <p>
-                            {{ 'core.grades.gradelong' | translate: { $a: {
-                            grade: attempt.formattedGrade,
-                            max: quiz.gradeFormatted,
-                            } } }}
-                        </p>
-                        } @else {
-                        <p>{{ 'addon.mod_quiz.notyetgraded' | translate }}</p>
-                        }
-                        }
-                    </div>
-                </ion-item>
-                <div class="addon-mod_quiz-attempt-details" slot="content">
-                    <addon-mod-quiz-attempt-info [quiz]="quiz" [attempt]="attempt" [additionalData]="attempt.additionalData" />
-
-                    @if (attempt.canReview) {
-                    <hr>
-                    <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="reviewAttempt(attempt.id)" fill="outline">
-                        <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
-                        {{ 'addon.mod_quiz.review' | translate }}
-                    </ion-button>
-                    } @else if (attempt.completed && attempt.cannotReviewMessage) {
-                    <hr>
-                    <ion-item class="ion-text-wrap addon-mod_quiz-attempt-noreview">
+
+                @if (gradebookFeedback) {
+                    <ion-item class="ion-text-wrap addon-mod_quiz-gradebook-feedback">
                         <ion-label>
+                            <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
                             <p>
-                                <ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
-                                {{ attempt.cannotReviewMessage }}
+                                <core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
+                                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                             </p>
                         </ion-label>
                     </ion-item>
-                    } @else if (attempt.finishedOffline) {
+                }
+
+                @if (quiz.showFeedback && overallFeedback) {
                     <hr>
-                    <ion-item class="ion-text-wrap addon-mod_quiz-attempt-finishedoffline">
+                    <ion-item class="ion-text-wrap addon-mod_quiz-overall-feedback">
                         <ion-label>
+                            <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
                             <p>
-                                <ion-icon name="fas-clock" slot="start" aria-hidden="true" />
-                                {{ 'addon.mod_quiz.finishedofflinenotice' | translate }}
+                                <core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback"
+                                    contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                             </p>
                         </ion-label>
                     </ion-item>
-                    }
-                </div>
-            </ion-accordion>
+                }
+
             }
-        </ion-accordion-group>
-    </ion-card>
+
+            <ion-accordion-group>
+                @for (attempt of attempts; track attempt.id) {
+                    <ion-accordion [value]="attempt.id" toggleIconSlot="start">
+                        <ion-item slot="header" class="ion-text-wrap addon-mod_quiz-attempt-title" lines="none">
+                            <ion-label>
+                                <h3>{{ 'addon.mod_quiz.attempt' | translate:{ $a: attempt.attempt } }}</h3>
+                            </ion-label>
+                            <div slot="end" class="addon-mod_quiz-attempt-title-info">
+                                <addon-mod-quiz-attempt-state [state]="attempt.state" [finishedOffline]="attempt.finishedOffline" />
+                                @if (attempt.finished && quiz.showAttemptsGrades) {
+                                    @if (attempt.rescaledGrade !== undefined && attempt.rescaledGrade >= 0) {
+                                        <p>
+                                            {{ 'core.grades.gradelong' | translate: { $a: {
+                            grade: attempt.formattedGrade,
+                            max: quiz.gradeFormatted,
+                            } } }}
+                                        </p>
+                                    } @else {
+                                        <p>{{ 'addon.mod_quiz.notyetgraded' | translate }}</p>
+                                    }
+                                }
+                            </div>
+                        </ion-item>
+                        <div class="addon-mod_quiz-attempt-details" slot="content">
+                            <addon-mod-quiz-attempt-info [quiz]="quiz" [attempt]="attempt" [additionalData]="attempt.additionalData" />
+
+                            @if (attempt.canReview) {
+                                <hr>
+                                <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="reviewAttempt(attempt.id)"
+                                    fill="outline">
+                                    <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
+                                    {{ 'addon.mod_quiz.review' | translate }}
+                                </ion-button>
+                            } @else if (attempt.completed && attempt.cannotReviewMessage) {
+                                <hr>
+                                <ion-item class="ion-text-wrap addon-mod_quiz-attempt-noreview">
+                                    <ion-label>
+                                        <p>
+                                            <ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
+                                            {{ attempt.cannotReviewMessage }}
+                                        </p>
+                                    </ion-label>
+                                </ion-item>
+                            } @else if (attempt.finishedOffline) {
+                                <hr>
+                                <ion-item class="ion-text-wrap addon-mod_quiz-attempt-finishedoffline">
+                                    <ion-label>
+                                        <p>
+                                            <ion-icon name="fas-clock" slot="start" aria-hidden="true" />
+                                            {{ 'addon.mod_quiz.finishedofflinenotice' | translate }}
+                                        </p>
+                                    </ion-label>
+                                </ion-item>
+                            }
+                        </div>
+                    </ion-accordion>
+                }
+            </ion-accordion-group>
+        </ion-card>
     }
 
     <!-- More data. -->
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index 59d8fd3706e..06df2824a93 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 5fb418b670f..172e41799ce 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index 661324b9381..01a9fe5bf9e 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index 053903639b5..aadf1710c83 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
index fbd9d7e5cdc..1c2e41f536f 100644
--- a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -19,15 +19,15 @@
             (action)="goToNewPage()" />
 
         @if (courseContentsPage) {
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
         }
     </core-context-menu>
 
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 46319c337e5..4df23f573bf 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index c3ec1194e46..2df4f8b05e3 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -21,45 +21,45 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
     </ion-refresher>
     <core-loading [hideUntil]="preferencesLoaded">
         @if (warningMessage()) {
-        <ion-card class="core-warning-card ion-margin-top">
-            <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
-                <ion-label>{{ warningMessage() }}</ion-label>
-            </ion-item>
-        </ion-card>
+            <ion-card class="core-warning-card ion-margin-top">
+                <ion-item>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
+                    <ion-label>{{ warningMessage() }}</ion-label>
+                </ion-item>
+            </ion-card>
         } @else {
-        <ion-card>
-            <ion-item class="ion-text-wrap" *ngIf="preferences">
-                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)">
-                    <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
-                </ion-toggle>
-            </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
-                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
-                    <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
-                </ion-toggle>
-            </ion-item>
-        </ion-card>
+            <ion-card>
+                <ion-item class="ion-text-wrap" *ngIf="preferences">
+                    <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)">
+                        <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
+                    </ion-toggle>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
+                    <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
+                        <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
+                    </ion-toggle>
+                </ion-item>
+            </ion-card>
 
-        <ion-card>
-            <ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length">
-                <!-- Show processor selector. -->
-                <ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
-                    <p class="item-heading" slot="label">{{ 'addon.notifications.typeofnotification' | translate }}</p>
-                    <ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
-                        {{ processor.displayname }}
-                    </ion-select-option>
-                </ion-select>
-            </ion-item>
+            <ion-card>
+                <ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length">
+                    <!-- Show processor selector. -->
+                    <ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
+                        <p class="item-heading" slot="label">{{ 'addon.notifications.typeofnotification' | translate }}</p>
+                        <ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
+                            {{ processor.displayname }}
+                        </ion-select-option>
+                    </ion-select>
+                </ion-item>
 
-            <ng-container *ngIf="loggedInOffLegacyMode">
-                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
-            </ng-container>
+                <ng-container *ngIf="loggedInOffLegacyMode">
+                    <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
+                </ng-container>
 
-            <ng-container *ngIf="!loggedInOffLegacyMode">
-                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
-            </ng-container>
-        </ion-card>
+                <ng-container *ngIf="!loggedInOffLegacyMode">
+                    <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
+                </ng-container>
+            </ion-card>
         }
     </core-loading>
 
diff --git a/src/addons/privatefiles/components/file-actions/file-actions.html b/src/addons/privatefiles/components/file-actions/file-actions.html
index b516ef80ea2..c0999174853 100644
--- a/src/addons/privatefiles/components/file-actions/file-actions.html
+++ b/src/addons/privatefiles/components/file-actions/file-actions.html
@@ -17,10 +17,10 @@
 
 <ion-list>
     @if (isDownloaded) {
-    <ion-item button detail="false" lines="none" (click)="close({ status: 'deleteOffline' })">
-        <ion-icon slot="start" name="fam-cloud-x" aria-hidden="true" />
-        <ion-label>{{ 'core.removedownloadeddata' | translate }}</ion-label>
-    </ion-item>
+        <ion-item button detail="false" lines="none" (click)="close({ status: 'deleteOffline' })">
+            <ion-icon slot="start" name="fam-cloud-x" aria-hidden="true" />
+            <ion-label>{{ 'core.removedownloadeddata' | translate }}</ion-label>
+        </ion-item>
     }
 
     <ion-item button detail="false" (click)="close({ status: 'deleteOnline' })" lines="none">
diff --git a/src/addons/privatefiles/components/file/file.html b/src/addons/privatefiles/components/file/file.html
index 367ea8a0f5d..f6eeb669763 100644
--- a/src/addons/privatefiles/components/file/file.html
+++ b/src/addons/privatefiles/components/file/file.html
@@ -1,54 +1,55 @@
 <ion-card class="card-file ion-activatable">
 
     @if (file) {
-    <ion-item [ngClass]="{ 'file-selected': showCheckbox && selected }" class="ion-text-wrap item-file" [detail]="false">
-
-        @if (showCheckbox) {
-        <ion-checkbox labelPlacement="start" [(ngModel)]="selected" (ngModelChange)="onSelectedFileChange.emit($event)" />
-        } @else {
-        <ion-thumbnail slot="start" (click)="download($event, true)">
-            <img [src]="fileIcon" alt="" role="presentation" />
-        </ion-thumbnail>
-        }
-
-        <ion-label (click)="download($event, true)">
-            <p class="item-heading">
-                <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>
-
-                @if (state === statusDownloaded) {
-                <ion-icon class="core-icon-downloaded" color="success" name="fam-cloud-done"
-                    [attr.aria-label]="'core.downloaded' | translate" role="status" />
-                }
-            </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">
-            <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>
-
-            @if (!showCheckbox) {
-
-            @if (state !== statusDownloaded) {
-            <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" [canTrustDownload]="!alwaysDownload"
-                (action)="download()" />
+        <ion-item [ngClass]="{ 'file-selected': showCheckbox && selected }" class="ion-text-wrap item-file" [detail]="false">
+
+            @if (showCheckbox) {
+                <ion-checkbox labelPlacement="start" [(ngModel)]="selected" (ngModelChange)="onSelectedFileChange.emit($event)" />
+            } @else {
+                <ion-thumbnail slot="start" (click)="download($event, true)">
+                    <img [src]="fileIcon" alt="" role="presentation" />
+                </ion-thumbnail>
             }
 
-            @if (canDelete) {
-            <ion-button (click)="openMenuClick()" fill="clear">
-                <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
-            </ion-button>
-            }
-            }
-        </div>
-    </ion-item>
-    <ion-ripple-effect />
+            <ion-label (click)="download($event, true)">
+                <p class="item-heading">
+                    <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>
+
+                    @if (state === statusDownloaded) {
+                        <ion-icon class="core-icon-downloaded" color="success" name="fam-cloud-done"
+                            [attr.aria-label]="'core.downloaded' | translate" role="status" />
+                    }
+                </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">
+                <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>
+
+                @if (!showCheckbox) {
+
+                    @if (state !== statusDownloaded) {
+                        <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
+                            [canTrustDownload]="!alwaysDownload" (action)="download()" />
+                    }
+
+                    @if (canDelete) {
+                        <ion-button (click)="openMenuClick()" fill="clear">
+                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
+                        </ion-button>
+                    }
+                }
+            </div>
+        </ion-item>
+        <ion-ripple-effect />
     }
 
 </ion-card>
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index 3abdd3d5d37..44d47789987 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -2,11 +2,11 @@
     <ion-toolbar>
         <ion-buttons slot="start">
             @if (selectFilesEnabled()) {
-            <ion-button fill="clear" [ariaLabel]="'core.close' | translate" (click)="cancelFileSelection()">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
-            </ion-button>
+                <ion-button fill="clear" [ariaLabel]="'core.close' | translate" (click)="cancelFileSelection()">
+                    <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
+                </ion-button>
             } @else {
-            <ion-back-button [text]="'core.back' | translate" />
+                <ion-back-button [text]="'core.back' | translate" />
             }
         </ion-buttons>
         <ion-title>
@@ -14,9 +14,9 @@ <h1>{{ selectFilesEnabled() ? (selectedFiles.length + ' ' + title) : title }}</h
         </ion-title>
         <ion-buttons slot="end">
             @if (selectFilesEnabled() && selectedFiles.length > 0) {
-            <ion-button fill="clear" (click)="deleteSelectedFiles(true)" [ariaLabel]="'core.delete' | translate" color="danger">
-                <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
-            </ion-button>
+                <ion-button fill="clear" (click)="deleteSelectedFiles(true)" [ariaLabel]="'core.delete' | translate" color="danger">
+                    <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
+                </ion-button>
             }
         </ion-buttons>
     </ion-toolbar>
@@ -58,12 +58,12 @@ <h1>{{ selectFilesEnabled() ? (selectedFiles.length + ' ' + title) : title }}</h
                 </ion-item>
 
                 @if (!file.isdir) {
-                <addon-privatefiles-file [file]="file" [component]="component" [componentId]="file.contextid"
-                    (onOpenMenuClick)="root === 'my' && openManagementFileMenu($event, file)"
-                    (longPress)="canDeleteFiles && root === 'my' && enableMultipleSelection(file)"
-                    [showCheckbox]="canDeleteFiles && root === 'my' && selectFilesEnabled()"
-                    (onSelectedFileChange)="root === 'my' && selectedFileValueChanged($event, file)" showDownloadStatus="true"
-                    [selected]="file.selected" [canDelete]="canDeleteFiles && root === 'my'" />
+                    <addon-privatefiles-file [file]="file" [component]="component" [componentId]="file.contextid"
+                        (onOpenMenuClick)="root === 'my' && openManagementFileMenu($event, file)"
+                        (longPress)="canDeleteFiles && root === 'my' && enableMultipleSelection(file)"
+                        [showCheckbox]="canDeleteFiles && root === 'my' && selectFilesEnabled()"
+                        (onSelectedFileChange)="root === 'my' && selectedFileValueChanged($event, file)" showDownloadStatus="true"
+                        [selected]="file.selected" [canDelete]="canDeleteFiles && root === 'my'" />
                 }
             </ng-container>
         </ion-list>
@@ -74,19 +74,19 @@ <h1>{{ selectFilesEnabled() ? (selectedFiles.length + ' ' + title) : title }}</h
 
     <!-- Upload a private file. -->
     @if (showUpload && root !== 'site' && !path && !selectFilesEnabled()) {
-    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
-        <ion-fab-button (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
-            <ion-icon name="fas-arrow-up-from-bracket" aria-hidden="true" />
-            <span class="sr-only">{{ 'core.fileuploader.uploadafile' | translate }}</span>
-        </ion-fab-button>
-    </ion-fab>
+        <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
+            <ion-fab-button (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
+                <ion-icon name="fas-arrow-up-from-bracket" aria-hidden="true" />
+                <span class="sr-only">{{ 'core.fileuploader.uploadafile' | translate }}</span>
+            </ion-fab-button>
+        </ion-fab>
     }
 </ion-content>
 
 @if (selectFilesEnabled()) {
-<div class="ion-padding addons-privatefiles-index-select-all">
-    <ion-checkbox labelPlacement="end" [(ngModel)]="selectAll" (ngModelChange)="onSelectAllChanges($event)">
-        {{ 'core.selectall' | translate }}
-    </ion-checkbox>
-</div>
+    <div class="ion-padding addons-privatefiles-index-select-all">
+        <ion-checkbox labelPlacement="end" [(ngModel)]="selectAll" (ngModelChange)="onSelectAllChanges($event)">
+            {{ 'core.selectall' | translate }}
+        </ion-checkbox>
+    </div>
 }
diff --git a/src/addons/qtype/ordering/component/addon-qtype-ordering.html b/src/addons/qtype/ordering/component/addon-qtype-ordering.html
index d9b3fe1e6eb..4159ce57607 100644
--- a/src/addons/qtype/ordering/component/addon-qtype-ordering.html
+++ b/src/addons/qtype/ordering/component/addon-qtype-ordering.html
@@ -1,56 +1,58 @@
 @if (question && (question.text || question.text === '')) {
-<div>
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-        </ion-label>
-    </ion-item>
+    <div>
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+            </ion-label>
+        </ion-item>
 
-    @if (a11yAnnouncement) {
-    <div aria-live="polite" class="sr-only">{{ a11yAnnouncement }}</div>
-    }
+        @if (a11yAnnouncement) {
+            <div aria-live="polite" class="sr-only">{{ a11yAnnouncement }}</div>
+        }
 
-    <ion-reorder-group class="{{numberingClass}}" [disabled]="dragDisabled" (ionItemReorder)="moveItem($event.detail)">
-        @for (item of question.items; track item.id) {
-        <ion-card id="{{item.id}}" class="core-question-answer-{{item.correctClass}}">
-            <ion-item class="ion-text-wrap">
-                <ion-reorder slot="start" aria-hidden="true" />
+        <ion-reorder-group class="{{numberingClass}}" [disabled]="dragDisabled" (ionItemReorder)="moveItem($event.detail)">
+            @for (item of question.items; track item.id) {
+                <ion-card id="{{item.id}}" class="core-question-answer-{{item.correctClass}}">
+                    <ion-item class="ion-text-wrap">
+                        <ion-reorder slot="start" aria-hidden="true" />
 
-                @if (dragDisabled) {
-                @if (item.correctClass === 'correct') {
-                <ion-icon [name]="correctIcon" slot="start" [ariaLabel]="'core.question.correct' | translate" color="success" />
-                } @else if (item.correctClass === 'incorrect') {
-                <ion-icon [name]="incorrectIcon" slot="start" [ariaLabel]="'core.question.incorrect' | translate" color="danger" />
-                } @else if (item.correctClass.startsWith('partial')) {
-                <ion-icon [name]="partialCorrectIcon" slot="start" [ariaLabel]="'core.question.partiallycorrect' | translate"
-                    color="warning" />
-                }
-                }
+                        @if (dragDisabled) {
+                            @if (item.correctClass === 'correct') {
+                                <ion-icon [name]="correctIcon" slot="start" [ariaLabel]="'core.question.correct' | translate"
+                                    color="success" />
+                            } @else if (item.correctClass === 'incorrect') {
+                                <ion-icon [name]="incorrectIcon" slot="start" [ariaLabel]="'core.question.incorrect' | translate"
+                                    color="danger" />
+                            } @else if (item.correctClass.startsWith('partial')) {
+                                <ion-icon [name]="partialCorrectIcon" slot="start"
+                                    [ariaLabel]="'core.question.partiallycorrect' | translate" color="warning" />
+                            }
+                        }
 
-                <ion-label id="{{item.id}}-text">
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="item.content"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" />
-                </ion-label>
+                        <ion-label id="{{item.id}}-text">
+                            <core-format-text [component]="component" [componentId]="componentId" [text]="item.content"
+                                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" />
+                        </ion-label>
 
-                @if (!dragDisabled) {
-                <div slot="end" class="flex-row">
-                    <ion-button fill="clear" (click)="moveItemByClick($event, false, item.id)" data-action="move-backward"
-                        [ariaLabel]="'core.moveup' | translate" [attr.aria-description]="item.contentText">
-                        <ion-icon slot="icon-only" name="fas-chevron-up" aria-hidden="true" />
-                    </ion-button>
-                    <ion-button fill="clear" (click)="moveItemByClick($event, true, item.id)" data-action="move-forward"
-                        [ariaLabel]="'core.movedown' | translate" [attr.aria-description]="item.contentText">
-                        <ion-icon slot="icon-only" name="fas-chevron-down" aria-hidden="true" />
-                    </ion-button>
-                </div>
-                }
-            </ion-item>
-        </ion-card>
-        }
-    </ion-reorder-group>
+                        @if (!dragDisabled) {
+                            <div slot="end" class="flex-row">
+                                <ion-button fill="clear" (click)="moveItemByClick($event, false, item.id)" data-action="move-backward"
+                                    [ariaLabel]="'core.moveup' | translate" [attr.aria-description]="item.contentText">
+                                    <ion-icon slot="icon-only" name="fas-chevron-up" aria-hidden="true" />
+                                </ion-button>
+                                <ion-button fill="clear" (click)="moveItemByClick($event, true, item.id)" data-action="move-forward"
+                                    [ariaLabel]="'core.movedown' | translate" [attr.aria-description]="item.contentText">
+                                    <ion-icon slot="icon-only" name="fas-chevron-down" aria-hidden="true" />
+                                </ion-button>
+                            </div>
+                        }
+                    </ion-item>
+                </ion-card>
+            }
+        </ion-reorder-group>
 
-    <!-- Create a hidden input to hold the value. -->
-    <input type="hidden" [ngModel]="responseInput.value" [attr.name]="responseInput.name">
-</div>
+        <!-- Create a hidden input to hold the value. -->
+        <input type="hidden" [ngModel]="responseInput.value" [attr.name]="responseInput.name">
+    </div>
 }
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 50c6f6ec366..9a51d1ab0a8 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -99,9 +99,9 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
                     </ion-button>
                 </div>
                 @if (section.expanded) {
-                <ion-icon slot="start" size="small" name="fas-chevron-down" aria-hidden="true" />
+                    <ion-icon slot="start" size="small" name="fas-chevron-down" aria-hidden="true" />
                 } @else {
-                <ion-icon slot="start" size="small" name="fas-chevron-right" aria-hidden="true" />
+                    <ion-icon slot="start" size="small" name="fas-chevron-right" aria-hidden="true" />
                 }
             </ion-item>
             <ion-ripple-effect />
@@ -110,47 +110,48 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
             <ng-container *ngIf="section.expanded">
                 <ng-container *ngFor="let modOrSubsection of section.contents">
                     @if (!isModule(modOrSubsection)) {
-                    <ng-container *ngTemplateOutlet="sectionCard; context: { section: modOrSubsection }" />
+                        <ng-container *ngTemplateOutlet="sectionCard; context: { section: modOrSubsection }" />
                     } @else {
-                    <ion-item class="core-course-storage-activity"
-                        *ngIf="downloadEnabled || (!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0)">
-                        <core-mod-icon slot="start" *ngIf="modOrSubsection.handlerData.icon" [modicon]="modOrSubsection.handlerData.icon"
-                            [modname]="modOrSubsection.modname" [componentId]="modOrSubsection.instance"
-                            [fallbackTranslation]="modOrSubsection.modplural" [isBranded]="modOrSubsection.branded" />
-                        <ion-label class="ion-text-wrap">
-                            <p class="item-heading {{modOrSubsection.handlerData!.class}} addon-storagemanager-module-size">
-                                <core-format-text [text]="modOrSubsection.handlerData.title" [courseId]="modOrSubsection.course"
-                                    contextLevel="module" [contextInstanceId]="modOrSubsection.id" [adaptImg]="false" />
-                            </p>
-                            <ion-badge [color]="modOrSubsection.downloadStatus === statusDownloaded ? 'success' : 'light'"
-                                *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0">
-                                <ion-icon name="fam-cloud-done" *ngIf="modOrSubsection.downloadStatus === statusDownloaded"
-                                    [attr.aria-label]="'core.downloaded' | translate" />{{ modOrSubsection.totalSize |
+                        <ion-item class="core-course-storage-activity"
+                            *ngIf="downloadEnabled || (!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0)">
+                            <core-mod-icon slot="start" *ngIf="modOrSubsection.handlerData.icon"
+                                [modicon]="modOrSubsection.handlerData.icon" [modname]="modOrSubsection.modname"
+                                [componentId]="modOrSubsection.instance" [fallbackTranslation]="modOrSubsection.modplural"
+                                [isBranded]="modOrSubsection.branded" />
+                            <ion-label class="ion-text-wrap">
+                                <p class="item-heading {{modOrSubsection.handlerData!.class}} addon-storagemanager-module-size">
+                                    <core-format-text [text]="modOrSubsection.handlerData.title" [courseId]="modOrSubsection.course"
+                                        contextLevel="module" [contextInstanceId]="modOrSubsection.id" [adaptImg]="false" />
+                                </p>
+                                <ion-badge [color]="modOrSubsection.downloadStatus === statusDownloaded ? 'success' : 'light'"
+                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0">
+                                    <ion-icon name="fam-cloud-done" *ngIf="modOrSubsection.downloadStatus === statusDownloaded"
+                                        [attr.aria-label]="'core.downloaded' | translate" />{{ modOrSubsection.totalSize |
                                 coreBytesToSize }}
-                            </ion-badge>
-                            <ion-badge color="light" *ngIf="modOrSubsection.calculatingSize ||
+                                </ion-badge>
+                                <ion-badge color="light" *ngIf="modOrSubsection.calculatingSize ||
                             (section.isDownloading && modOrSubsection.downloadStatus === statusDownloaded)">
-                                {{ 'core.calculating' | translate }}
-                            </ion-badge>
-                        </ion-label>
+                                    {{ 'core.calculating' | translate }}
+                                </ion-badge>
+                            </ion-label>
 
-                        <div class="storage-buttons" slot="end">
-                            <core-download-refresh *ngIf="downloadEnabled && modOrSubsection.handlerData?.showDownloadButton &&
+                            <div class="storage-buttons" slot="end">
+                                <core-download-refresh *ngIf="downloadEnabled && modOrSubsection.handlerData?.showDownloadButton &&
                             modOrSubsection.downloadStatus !== statusDownloaded" [status]="modOrSubsection.downloadStatus" [enabled]="true"
-                                [canTrustDownload]="true" [loading]="modOrSubsection.spinner || modOrSubsection.handlerData.spinner"
-                                (action)="prefetchModule(modOrSubsection)"
-                                [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
-                                [statusSubject]="modOrSubsection.name" />
-                            <ion-button fill="clear" (click)="deleteForModule($event, modOrSubsection)"
-                                *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0" color="danger">
-                                <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
+                                    [canTrustDownload]="true" [loading]="modOrSubsection.spinner || modOrSubsection.handlerData.spinner"
+                                    (action)="prefetchModule(modOrSubsection)"
+                                    [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
+                                    [statusSubject]="modOrSubsection.name" />
+                                <ion-button fill="clear" (click)="deleteForModule($event, modOrSubsection)"
+                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0" color="danger">
+                                    <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
                                         'addon.storagemanager.deletedatafrom' | translate: { name: modOrSubsection.name }" />
-                            </ion-button>
-                            <p *ngIf="!downloadEnabled || !modOrSubsection.handlerData?.showDownloadButton" class="sr-only">
-                                {{ 'core.notdownloadable' | translate }}
-                            </p>
-                        </div>
-                    </ion-item>
+                                </ion-button>
+                                <p *ngIf="!downloadEnabled || !modOrSubsection.handlerData?.showDownloadButton" class="sr-only">
+                                    {{ 'core.notdownloadable' | translate }}
+                                </p>
+                            </div>
+                        </ion-item>
                     }
                 </ng-container>
             </ng-container>
diff --git a/src/core/components/attachments/core-attachments.html b/src/core/components/attachments/core-attachments.html
index a3108ab470d..32b2f207478 100644
--- a/src/core/components/attachments/core-attachments.html
+++ b/src/core/components/attachments/core-attachments.html
@@ -3,52 +3,62 @@
         <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) {
-        <ion-accordion-group>
-            <ion-accordion toggleIconSlot="start">
-                <ion-item class="core-attachments-header ion-text-wrap" slot="header">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.fileuploader.filesofthesetypes' | translate }}</p>
-                    </ion-label>
-                    <ion-icon name="fas-circle-info" aria-hidden="true" slot="end" color="dark" />
-                </ion-item>
+            <ion-accordion-group>
+                <ion-accordion toggleIconSlot="start">
+                    <ion-item class="core-attachments-header ion-text-wrap" slot="header">
+                        <ion-label>
+                            <p class="item-heading">{{ 'core.fileuploader.filesofthesetypes' | translate }}</p>
+                        </ion-label>
+                        <ion-icon name="fas-circle-info" aria-hidden="true" slot="end" color="dark" />
+                    </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>
-                </ul>
-            </ion-accordion>
-        </ion-accordion-group>
+                    <ul class="core-attachments" slot="content">
+                        @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 />
diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index ecc0b6bb66a..1acf6e33573 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -27,11 +27,11 @@
                 <ion-accordion-group [multiple]="true" (ionChange)="accordionMultipleChange($event.detail)"
                     [value]="accordionMultipleValue">
                     @for (section of sections; track section.id) {
-                    @if ($index
+                        @if ($index
                     <= lastShownSectionIndex && !section.hiddenbynumsections && section.id !==allSectionsId && section.id
                         !==stealthModulesSectionId) { <core-course-section [course]="course" [section]="section"
-                        [lastModuleViewed]="lastModuleViewed" [viewedModules]="viewedModules" [collapsible]="true" />
-                    }
+                                [lastModuleViewed]="lastModuleViewed" [viewedModules]="viewedModules" [collapsible]="true" />
+                        }
                     }
                 </ion-accordion-group>
             </core-dynamic-component>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index a9ef8818b2f..ea97392efba 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -64,31 +64,32 @@ <h2>
         <ng-container *ngIf="section.expanded">
             <ng-container *ngFor="let modOrSubsection of section.contents">
                 @if (!isModule(modOrSubsection)) {
-                <div class="core-course-index-subsection">
-                    <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: modOrSubsection}" />
-                </div>
+                    <div class="core-course-index-subsection">
+                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: modOrSubsection}" />
+                    </div>
                 } @else {
-                <ion-item class="module" [class.item-dimmed]="!modOrSubsection.visible" [class.indented]="modOrSubsection.indented"
-                    [class.item-hightlighted]="section.highlighted" (click)="selectSectionOrModule($event, section.id, modOrSubsection.id)"
-                    button>
-                    <ion-icon class="completioninfo completion_none" name="" *ngIf="modOrSubsection.completionStatus === undefined"
-                        slot="start" aria-hidden="true" />
-                    <ion-icon class="completioninfo completion_incomplete" name="far-circle" *ngIf="modOrSubsection.completionStatus === 0"
-                        slot="start" [attr.aria-label]="'core.course.todo' | translate" />
-                    <ion-icon class="completioninfo completion_complete" name="fas-circle"
-                        *ngIf="modOrSubsection.completionStatus === 1 || modOrSubsection.completionStatus === 2" color="success"
-                        slot="start" [attr.aria-label]="'core.course.done' | translate" />
-                    <ion-icon class="completioninfo completion_fail" name="fas-xmark" *ngIf="modOrSubsection.completionStatus === 3"
-                        color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
-                    <ion-label>
-                        <p class="item-heading">
-                            <core-format-text [text]="modOrSubsection.name" contextLevel="module" [contextInstanceId]="modOrSubsection.id"
-                                [courseId]="modOrSubsection.course" />
-                        </p>
-                    </ion-label>
-                    <ion-icon name="fas-lock" *ngIf="!modOrSubsection.uservisible" slot="end" class="restricted"
-                        [attr.aria-label]="'core.restricted' | translate" />
-                </ion-item>
+                    <ion-item class="module" [class.item-dimmed]="!modOrSubsection.visible" [class.indented]="modOrSubsection.indented"
+                        [class.item-hightlighted]="section.highlighted"
+                        (click)="selectSectionOrModule($event, section.id, modOrSubsection.id)" button>
+                        <ion-icon class="completioninfo completion_none" name="" *ngIf="modOrSubsection.completionStatus === undefined"
+                            slot="start" aria-hidden="true" />
+                        <ion-icon class="completioninfo completion_incomplete" name="far-circle"
+                            *ngIf="modOrSubsection.completionStatus === 0" slot="start"
+                            [attr.aria-label]="'core.course.todo' | translate" />
+                        <ion-icon class="completioninfo completion_complete" name="fas-circle"
+                            *ngIf="modOrSubsection.completionStatus === 1 || modOrSubsection.completionStatus === 2" color="success"
+                            slot="start" [attr.aria-label]="'core.course.done' | translate" />
+                        <ion-icon class="completioninfo completion_fail" name="fas-xmark" *ngIf="modOrSubsection.completionStatus === 3"
+                            color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
+                        <ion-label>
+                            <p class="item-heading">
+                                <core-format-text [text]="modOrSubsection.name" contextLevel="module"
+                                    [contextInstanceId]="modOrSubsection.id" [courseId]="modOrSubsection.course" />
+                            </p>
+                        </ion-label>
+                        <ion-icon name="fas-lock" *ngIf="!modOrSubsection.uservisible" slot="end" class="restricted"
+                            [attr.aria-label]="'core.restricted' | translate" />
+                    </ion-item>
                 }
             </ng-container>
         </ng-container>
diff --git a/src/core/features/course/components/course-section/course-section.html b/src/core/features/course/components/course-section/course-section.html
index bda52ec2045..b97378d357b 100644
--- a/src/core/features/course/components/course-section/course-section.html
+++ b/src/core/features/course/components/course-section/course-section.html
@@ -1,20 +1,20 @@
 @if (collapsible) {
-<ion-accordion class="core-course-module-list-wrapper" [id]="section.id"
-    [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="section.id" toggleIconSlot="start">
-    <ng-container *ngTemplateOutlet="sectionHeader" />
+    <ion-accordion class="core-course-module-list-wrapper" [id]="section.id"
+        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="section.id" toggleIconSlot="start">
+        <ng-container *ngTemplateOutlet="sectionHeader" />
 
-    <div slot="content">
-        <ng-container *ngIf="section.expanded">
-            <ng-container *ngTemplateOutlet="sectionContent" />
-        </ng-container>
-    </div>
-</ion-accordion>
+        <div slot="content">
+            <ng-container *ngIf="section.expanded">
+                <ng-container *ngTemplateOutlet="sectionContent" />
+            </ng-container>
+        </div>
+    </ion-accordion>
 } @else {
-<div class="core-course-module-list-wrapper" [id]="section.id"
-    [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
-    <ng-container *ngTemplateOutlet="sectionHeader" />
-    <ng-container *ngTemplateOutlet="sectionContent" />
-</div>
+    <div class="core-course-module-list-wrapper" [id]="section.id"
+        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
+        <ng-container *ngTemplateOutlet="sectionHeader" />
+        <ng-container *ngTemplateOutlet="sectionContent" />
+    </div>
 }
 
 <ng-template #sectionHeader>
@@ -59,12 +59,12 @@ <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
 
     <ng-container *ngFor="let modOrSubsection of section.contents">
         @if (!isModule(modOrSubsection)) {
-        <core-course-section [course]="course" [section]="modOrSubsection" [lastModuleViewed]="lastModuleViewed"
-            [viewedModules]="viewedModules" [collapsible]="true" />
+            <core-course-section [course]="course" [section]="modOrSubsection" [lastModuleViewed]="lastModuleViewed"
+                [viewedModules]="viewedModules" [collapsible]="true" />
         } @else {
-        <core-course-module *ngIf="modOrSubsection.visibleoncoursepage !== 0" [module]="modOrSubsection" [section]="section"
-            [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
-            [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === modOrSubsection.id" [class.core-course-module-not-viewed]="
+            <core-course-module *ngIf="modOrSubsection.visibleoncoursepage !== 0" [module]="modOrSubsection" [section]="section"
+                [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
+                [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === modOrSubsection.id" [class.core-course-module-not-viewed]="
                     !viewedModules[modOrSubsection.id] &&
                     (!modOrSubsection.completiondata || modOrSubsection.completiondata.state === completionStatusIncomplete)" />
         }
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 51da2cb313d..f85ab7b5317 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -14,11 +14,11 @@
                     <div class="activity-title">
                         <p class="item-heading">
                             @if (module.handlerData.action && module.uservisible) {
-                            <span (ariaButtonClick)="moduleClicked($event)">
-                                <ng-container *ngTemplateOutlet="title" />
-                            </span>
+                                <span (ariaButtonClick)="moduleClicked($event)">
+                                    <ng-container *ngTemplateOutlet="title" />
+                                </span>
                             } @else {
-                            <ng-container *ngTemplateOutlet="title" />
+                                <ng-container *ngTemplateOutlet="title" />
                             }
                             <ng-template #title>
                                 <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
@@ -111,7 +111,7 @@
         </div>
 
         @if (module.handlerData.action && module.uservisible) {
-        <ion-ripple-effect />
+            <ion-ripple-effect />
         }
     </ng-container>
 
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index 4699bdada77..65acb6cef4c 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -11,17 +11,17 @@ <h1>
 
         <ion-buttons slot="end">
             @if (course?.format !== 'singleactivity') {
-            <ion-button fill="clear" (click)="openCourseSummary()" [ariaLabel]="'core.course.coursesummary' | translate">
-                <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-            </ion-button>
+                <ion-button fill="clear" (click)="openCourseSummary()" [ariaLabel]="'core.course.coursesummary' | translate">
+                    <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+                </ion-button>
 
-            <!-- Add an empty context menu so tab pages can add items, otherwise the menu disappears in some cases. -->
-            <core-context-menu />
+                <!-- Add an empty context menu so tab pages can add items, otherwise the menu disappears in some cases. -->
+                <core-context-menu />
             } @else {
-            <core-context-menu>
-                <core-context-menu-item [priority]="1" [content]="'core.course.coursesummary' | translate" (action)="openCourseSummary()"
-                    iconAction="fas-graduation-cap" />
-            </core-context-menu>
+                <core-context-menu>
+                    <core-context-menu-item [priority]="1" [content]="'core.course.coursesummary' | translate"
+                        (action)="openCourseSummary()" iconAction="fas-graduation-cap" />
+                </core-context-menu>
             }
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/core/features/course/pages/list-mod-type/list-mod-type.html b/src/core/features/course/pages/list-mod-type/list-mod-type.html
index ab5a61b1e9d..30ac6df2e8b 100644
--- a/src/core/features/course/pages/list-mod-type/list-mod-type.html
+++ b/src/core/features/course/pages/list-mod-type/list-mod-type.html
@@ -38,10 +38,10 @@ <h2>
         </ion-item-divider>
         <ng-container *ngFor="let modOrSubsection of section.contents">
             @if (isModule(modOrSubsection)) {
-            <core-course-module [module]="modOrSubsection" [section]="section" [showActivityDates]="false" [showAvailability]="false"
-                [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false" />
+                <core-course-module [module]="modOrSubsection" [section]="section" [showActivityDates]="false" [showAvailability]="false"
+                    [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false" />
             } @else {
-            <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: modOrSubsection}" />
+                <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: modOrSubsection}" />
             }
         </ng-container>
     </ion-card>
diff --git a/src/core/features/login/components/identity-provider/identity-provider.html b/src/core/features/login/components/identity-provider/identity-provider.html
index 23c98b27aa0..484798fa1a6 100644
--- a/src/core/features/login/components/identity-provider/identity-provider.html
+++ b/src/core/features/login/components/identity-provider/identity-provider.html
@@ -1,7 +1,7 @@
 <ion-button class="ion-text-wrap ion-margin core-oauth-provider ion-no-margin-horizontal" (click)="openOAuth()" [ariaLabel]="provider.name"
     expand="block" fill="outline">
     @if (provider.iconurl) {
-    <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true" (error)="provider.iconurl = ''" />
+        <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true" (error)="provider.iconurl = ''" />
     }
     <ion-label>{{ provider.name }}</ion-label>
 </ion-button>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 1a682cefc73..5a1753abac2 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -52,25 +52,25 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
 
             <div class="core-login-methods">
                 @if (currentLogin && currentLogin.provider) {
-                <core-identity-provider [provider]="currentLogin.provider" [launchurl]="siteConfig?.launchurl" [redirectData]="redirectData"
-                    [siteUrl]="site.siteUrl" />
-                @if (currentLogin.showOther) {
-                <ion-accordion-group>
-                    <ion-accordion toggleIconSlot="start">
-                        <ion-item class="ion-text-wrap" slot="header">
-                            <ion-label>
-                                <p class="item-heading">{{ 'core.login.morewaystologin' | translate }}</p>
-                            </ion-label>
-                        </ion-item>
+                    <core-identity-provider [provider]="currentLogin.provider" [launchurl]="siteConfig?.launchurl"
+                        [redirectData]="redirectData" [siteUrl]="site.siteUrl" />
+                    @if (currentLogin.showOther) {
+                        <ion-accordion-group>
+                            <ion-accordion toggleIconSlot="start">
+                                <ion-item class="ion-text-wrap" slot="header">
+                                    <ion-label>
+                                        <p class="item-heading">{{ 'core.login.morewaystologin' | translate }}</p>
+                                    </ion-label>
+                                </ion-item>
 
-                        <div slot="content">
-                            <ng-template *ngTemplateOutlet="loginMethods" />
-                        </div>
-                    </ion-accordion>
-                </ion-accordion-group>
-                }
+                                <div slot="content">
+                                    <ng-template *ngTemplateOutlet="loginMethods" />
+                                </div>
+                            </ion-accordion>
+                        </ion-accordion-group>
+                    }
                 } @else {
-                <ng-template *ngTemplateOutlet="loginMethods" />
+                    <ng-template *ngTemplateOutlet="loginMethods" />
                 }
             </div>
         </div>
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index abe5c2f73bd..bb3636496b6 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -98,9 +98,9 @@ <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
                 <ion-label>
                     <p class="item-heading">Private token</p>
                     @if (privateToken) {
-                    <p>{{ privateToken }}</p>
+                        <p>{{ privateToken }}</p>
                     } @else {
-                    <p>---</p>
+                        <p>---</p>
                     }
                 </ion-label>
             </ion-item>
@@ -108,31 +108,31 @@ <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
                 <ion-label>
                     <p class="item-heading">Files access key</p>
                     @if (filesAccessKey) {
-                    <p>{{ filesAccessKey }}</p>
+                        <p>{{ filesAccessKey }}</p>
                     } @else {
-                    <p>---</p>
+                        <p>---</p>
                     }
                 </ion-label>
             </ion-item>
 
             @if (privateToken) {
-            <ion-item class="ion-text-wrap" *ngIf="autoLoginTimeBetweenRequests">
-                <ion-label>
-                    <p class="item-heading">Minimum time between auto-login requests</p>
-                    <p>{{ autoLoginTimeBetweenRequests | coreDuration }}</p>
-                </ion-label>
-            </ion-item>
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <p class="item-heading">Last auto login in this device</p>
-                    @if (lastAutoLoginTime && lastAutoLoginTime > 0) {
-                    <p>{{ lastAutoLoginTime | coreTimeAgo }}</p>
-                    <ion-note class="core-text-sm">This value will reset when the app is restarted.</ion-note>
-                    } @else {
-                    <p>---</p>
-                    }
-                </ion-label>
-            </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="autoLoginTimeBetweenRequests">
+                    <ion-label>
+                        <p class="item-heading">Minimum time between auto-login requests</p>
+                        <p>{{ autoLoginTimeBetweenRequests | coreDuration }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item class="ion-text-wrap">
+                    <ion-label>
+                        <p class="item-heading">Last auto login in this device</p>
+                        @if (lastAutoLoginTime && lastAutoLoginTime > 0) {
+                            <p>{{ lastAutoLoginTime | coreTimeAgo }}</p>
+                            <ion-note class="core-text-sm">This value will reset when the app is restarted.</ion-note>
+                        } @else {
+                            <p>---</p>
+                        }
+                    </ion-label>
+                </ion-item>
             }
 
             <ion-item-divider>
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index abe37a513ec..4ab4620b85b 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -104,9 +104,9 @@ <h1>
             <ion-label class="ion-text-wrap">
                 <p class="item-heading">{{ 'core.settings.networkstatus' | translate}}</p>
                 @if (deviceInfo.isOnline) {
-                <p>{{ 'core.online' | translate }}</p>
+                    <p>{{ 'core.online' | translate }}</p>
                 } @else {
-                <p>{{ 'core.offline' | translate }}</p>
+                    <p>{{ 'core.offline' | translate }}</p>
                 }
             </ion-label>
         </ion-item>
diff --git a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
index f7c968dd4d9..7af3fd3d59f 100644
--- a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
+++ b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
@@ -1,14 +1,14 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     @if (!courseContentsPage) {
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
+            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
+        </ion-button>
     } @else {
-    <core-context-menu>
-        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
-            iconAction="fas-circle-info" />
-    </core-context-menu>
+        <core-context-menu>
+            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
+                iconAction="fas-circle-info" />
+        </core-context-menu>
     }
 </core-navbar-buttons>
 
diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index d25fdff4a77..278e6df6dad 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -3,9 +3,9 @@
         <swiper-slide>
             <div class="swiper-zoom-container">
                 @if (dataUrl) {
-                <img [src]="dataUrl" [alt]="title">
+                    <img [src]="dataUrl" [alt]="title">
                 } @else {
-                <img [url]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
+                    <img [url]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
                 }
             </div>
         </swiper-slide>
diff --git a/src/core/features/viewer/components/reading-mode-settings/reading-mode-settings.html b/src/core/features/viewer/components/reading-mode-settings/reading-mode-settings.html
index f50e182bae3..1d7d412bb84 100644
--- a/src/core/features/viewer/components/reading-mode-settings/reading-mode-settings.html
+++ b/src/core/features/viewer/components/reading-mode-settings/reading-mode-settings.html
@@ -34,11 +34,11 @@
     </ion-item>
     <ion-radio-group [(ngModel)]="settings.theme" (ionChange)="onSettingChange()">
         @for (theme of themes; track $index; let last = $last;) {
-        <ion-item class="ion-text-wrap" [lines]="last ? 'full': 'none'">
-            <ion-radio [value]="theme" class="reading-theme">
-                <div class="preview {{theme}}">Aa</div> {{ 'core.viewer.readingtheme'+theme | translate }}
-            </ion-radio>
-        </ion-item>
+            <ion-item class="ion-text-wrap" [lines]="last ? 'full': 'none'">
+                <ion-radio [value]="theme" class="reading-theme">
+                    <div class="preview {{theme}}">Aa</div> {{ 'core.viewer.readingtheme'+theme | translate }}
+                </ion-radio>
+            </ion-item>
         }
     </ion-radio-group>
     <ion-item class="ion-text-wrap" (ionChange)="onSettingChange()" lines="full">