diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index 7a609db0b..0cb85f6c7 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="badge">{{ badge.name }}</h1>
@@ -11,7 +11,7 @@
 </ion-header>
 <ion-content [core-swipe-navigation]="badges" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="badgeLoaded">
         <ion-item-group *ngIf="badge">
@@ -122,8 +122,7 @@
                     <ion-label>
                         <p class="item-heading">{{ 'core.course' | translate}}</p>
                         <p>
-                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
-                            </core-format-text>
+                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId" />
                         </p>
                     </ion-label>
                 </ion-item>
diff --git a/src/addons/badges/pages/user-badges/user-badges.html b/src/addons/badges/pages/user-badges/user-badges.html
index d91a5e0e8..edc263c99 100644
--- a/src/addons/badges/pages/user-badges/user-badges.html
+++ b/src/addons/badges/pages/user-badges/user-badges.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.badges.badges' | translate }}</h1>
@@ -11,11 +11,10 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!badges.loaded" (ionRefresh)="refreshBadges($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="badges.loaded">
-            <core-empty-box *ngIf="badges.empty" icon="fas-trophy" [message]="'addon.badges.nobadges' | translate">
-            </core-empty-box>
+            <core-empty-box *ngIf="badges.empty" icon="fas-trophy" [message]="'addon.badges.nobadges' | translate" />
 
             <ion-list *ngIf="!badges.empty" class="ion-no-margin">
                 <ion-item button class="ion-text-wrap" *ngFor="let badge of badges.items" [attr.aria-label]="badge.name"
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index 98aebcd59..ca35ca46c 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -5,8 +5,7 @@
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
-        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false">
-        </core-mod-icon>
+        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" />
         <ion-label>{{ entry.name }}</ion-label>
     </ion-item>
 </core-loading>
diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 1a1f2e148..1c55aafb3 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -7,16 +7,14 @@
         <div *ngIf="downloadCoursesEnabled && filteredCourses.length > 0" class="core-button-spinner">
             <ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
                 [attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
-                <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
-                </ion-icon>
+                <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge" role="progressbar"
                 [attr.aria-valuemax]="prefetchCoursesData.total" [attr.aria-valuenow]="prefetchCoursesData.count"
                 [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
                 {{prefetchCoursesData.badge}}
             </ion-badge>
-            <ion-spinner *ngIf="prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate">
-            </ion-spinner>
+            <ion-spinner *ngIf="prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate" />
         </div>
     </div>
 </ion-item-divider>
@@ -26,8 +24,7 @@
         <ion-col>
             <!-- Filter courses. -->
             <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
-                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate">
-            </ion-searchbar>
+                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate" />
         </ion-col>
     </ion-row>
     <ion-row class="ion-justify-content-between ion-align-items-center addon-block-myoverview-filter" *ngIf="hasCourses">
@@ -70,8 +67,7 @@
         <ion-col>
             <!-- Filter courses. -->
             <ion-searchbar class="ion-hide-md-down" [(ngModel)]="textFilter" (ionInput)="filterTextChanged($event.target)"
-                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate">
-            </ion-searchbar>
+                (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate" />
         </ion-col>
         <ion-col size="auto" *ngIf="sort.enabled">
             <core-combobox [label]="'core.sortby' | translate" [selection]="sort.selected" (onChange)="sortCourses($event)"
@@ -90,11 +86,11 @@
         <ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
             <ion-button *ngIf="layout === 'card'" fill="outline" (click)="toggleLayout('list')"
                 [attr.aria-label]="'addon.block_myoverview.aria:list' | translate">
-                <ion-icon slot="icon-only" name="fas-list" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-list" aria-hidden="true" />
             </ion-button>
             <ion-button *ngIf="layout === 'list'" fill="outline" (click)="toggleLayout('card')"
                 [attr.aria-label]="'addon.block_myoverview.aria:card' | translate">
-                <ion-icon slot="icon-only" name="fas-table-cells-large" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-table-cells-large" aria-hidden="true" />
             </ion-button>
         </ion-col>
     </ion-row>
@@ -114,8 +110,7 @@
                 {{'addon.block_myoverview.nocoursesenrolleddescription' | translate}}
             </p>
             <ion-button (click)="openSearch()" fill="outline">
-                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true">
-                </ion-icon>
+                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                 {{'addon.block_myoverview.browseallcourses' | translate}}
             </ion-button>
         </ng-container>
@@ -128,8 +123,7 @@
                 <ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
                     size-xl="3">
                     <core-courses-course-list-item [course]="course" class="core-courseoverview" [showDownload]="downloadCourseEnabled"
-                        [layout]="layout">
-                    </core-courses-course-list-item>
+                        [layout]="layout" />
                 </ion-col>
             </ion-row>
         </ion-grid>
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index ea4e9891a..1b76456b0 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -3,21 +3,19 @@
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>
     <div slot="end" class="flex-row">
-        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
-        </core-horizontal-scroll-controls>
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
-        [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
+        [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate" />
     <!-- List of courses. -->
     <div [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
         <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
             <div class="safe-area-pseudo-padding-start"></div>
             <ng-container *ngFor="let course of courses">
-                <core-courses-course-list-item [course]="course" class="core-recentlyaccessedcourses" layout="summarycard">
-                </core-courses-course-list-item>
+                <core-courses-course-list-item [course]="course" class="core-recentlyaccessedcourses" layout="summarycard" />
             </ng-container>
             <div class="safe-area-pseudo-padding-end"></div>
         </div>
diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 9d157d6d1..c72044e87 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -3,8 +3,7 @@
         <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
     </ion-label>
     <div slot="end">
-        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
-        </core-horizontal-scroll-controls>
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
@@ -16,18 +15,16 @@
                 <ion-card>
                     <ion-item class="core-course-module-handler ion-text-wrap" [detail]="false" (click)="action($event, item)" button>
                         <core-mod-icon slot="start" *ngIf="item.iconUrl" [modicon]="item.iconUrl" [modname]="item.modname"
-                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose">
-                        </core-mod-icon>
+                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose" />
                         <ion-label>
                             <!-- Add the icon title so accessibility tools read it. -->
                             <span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span>
                             <p class="item-heading">
                                 <core-format-text [text]="item.name" contextLevel="module" [contextInstanceId]="item.cmid"
-                                    [courseId]="item.courseid"></core-format-text>
+                                    [courseId]="item.courseid" />
                             </p>
                             <p>
-                                <core-format-text [text]="item.coursename" contextLevel="course" [contextInstanceId]="item.courseid">
-                                </core-format-text>
+                                <core-format-text [text]="item.coursename" contextLevel="course" [contextInstanceId]="item.courseid" />
                             </p>
                         </ion-label>
                     </ion-item>
@@ -38,6 +35,6 @@
     </div>
 
     <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
-        [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
+        [message]="'addon.block_recentlyaccesseditems.noitems' | translate" />
 
 </core-loading>
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index 4b6d5b6ba..6885e5146 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -8,10 +8,10 @@
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>
                 <core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course"
-                    [contextInstanceId]="siteHomeId"></core-format-text>
+                    [contextInstanceId]="siteHomeId" />
             </ion-label>
         </ion-item>
 
-        <core-course-module *ngFor="let module of mainMenuBlock.modules" [module]="module" [section]="mainMenuBlock"></core-course-module>
+        <core-course-module *ngFor="let module of mainMenuBlock.modules" [module]="module" [section]="mainMenuBlock" />
     </ion-list>
 </core-loading>
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index debe61210..f022f3e2c 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -3,21 +3,19 @@
         <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     </ion-label>
     <div slot="end" class="flex-row">
-        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
-        </core-horizontal-scroll-controls>
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId" />
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="courses.length === 0" image="assets/img/icons/courses.svg"
-        [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
+        [message]="'addon.block_starredcourses.nocourses' | translate" />
     <!-- List of courses. -->
     <div [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
         <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
             <div class="safe-area-pseudo-padding-start"></div>
             <ng-container *ngFor="let course of courses">
-                <core-courses-course-list-item [course]="course" class="core-block_starredcourses" layout="summarycard">
-                </core-courses-course-list-item>
+                <core-courses-course-list-item [course]="course" class="core-block_starredcourses" layout="summarycard" />
             </ng-container>
             <div class="safe-area-pseudo-padding-end"></div>
         </div>
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 d84981b96..8e31ce4ba 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
@@ -2,8 +2,7 @@
     <ion-label class="ion-text-wrap">
         <h3>
             <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
-            <core-format-text [text]="course.displayname || course.fullname" contextLevel="course" [contextInstanceId]="course.id">
-            </core-format-text>
+            <core-format-text [text]="course.displayname || course.fullname" contextLevel="course" [contextInstanceId]="course.id" />
         </h3>
     </ion-label>
 </ion-item>
@@ -23,15 +22,13 @@
                             <ion-col class="addon-block-timeline-activity-time ion-no-padding">
                                 <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                 <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
-                                    [modname]="event.modulename" [purpose]="event.purpose">
-                                </core-mod-icon>
+                                    [modname]="event.modulename" [purpose]="event.purpose" />
                             </ion-col>
                             <ion-col class="addon-block-timeline-activity-name ion-no-padding">
                                 <p class="item-heading">
                                     <span>
                                         <core-format-text [text]="event.activityname || event.name" contextLevel="module"
-                                            [contextInstanceId]="event.id" [courseId]="event.course?.id">
-                                        </core-format-text>
+                                            [contextInstanceId]="event.id" [courseId]="event.course?.id" />
                                     </span>
                                     <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
                                     </ion-badge>
@@ -39,15 +36,13 @@
                                 <p *ngIf="showInlineCourse && event.course">
                                     <span>
                                         <core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
-                                            [contextInstanceId]="event.course.id">
-                                        </core-format-text>
+                                            [contextInstanceId]="event.course.id" />
                                     </span>
                                 </p>
                                 <p *ngIf="event.activitystr">
                                     <span>
                                         <core-format-text *ngIf="event.activitystr" [text]="event.activitystr" contextLevel="module"
-                                            [contextInstanceId]="event.id">
-                                        </core-format-text>
+                                            [contextInstanceId]="event.id" />
                                     </span>
                                 </p>
                             </ion-col>
@@ -72,5 +67,5 @@
     <ion-button expand="block" (click)="loadMore.emit()" fill="outline" *ngIf="!loadingMore">
         {{ 'core.loadmore' | translate }}
     </ion-button>
-    <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+    <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate" />
 </div>
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index b20b7952d..a5bc3a312 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -9,7 +9,7 @@
             <!-- Filter courses. -->
             <core-search-box (onSubmit)="searchChanged($event)" (onClear)="searchChanged('')"
                 [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" [lengthCheck]="2"
-                searchArea="AddonBlockTimeline"></core-search-box>
+                searchArea="AddonBlockTimeline" />
         </ion-col>
     </ion-row>
     <ion-row class="ion-justify-content-between ion-align-items-center addon-block-timeline-filter">
@@ -31,7 +31,7 @@
             <!-- Filter courses. -->
             <core-search-box (onSubmit)="searchChanged($event)" (onClear)="searchChanged('')"
                 [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" [lengthCheck]="2"
-                searchArea="AddonBlockTimeline"></core-search-box>
+                searchArea="AddonBlockTimeline" />
         </ion-col>
         <ion-col size="auto">
             <core-combobox [label]="'core.sortby' | translate" [formControl]="sort" (onChange)="sortChanged($event)"
@@ -46,9 +46,9 @@
         <ng-container *ngFor="let section of sections">
             <addon-block-timeline-events *ngIf="section.data$ | async as data" [events]="data.events"
                 [showInlineCourse]="(sort$ | async) === AddonBlockTimelineSort.ByDates" [canLoadMore]="data.canLoadMore"
-                [loadingMore]="data.loadingMore" (loadMore)="section.loadMore()" [course]="section.course"> </addon-block-timeline-events>
+                [loadingMore]="data.loadingMore" (loadMore)="section.loadMore()" [course]="section.course" />
         </ng-container>
         <core-empty-box *ngIf="sections && sections.length === 0" image="assets/img/icons/courses.svg"
-            [message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
+            [message]="'addon.block_timeline.noevents' | translate" />
     </ng-container>
 </core-loading>
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index df97ac484..9fac4dfb2 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -1,37 +1,35 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-item *ngIf="showMyEntriesToggle">
             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
-            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)" slot="end" />
         </ion-item>
-        <core-empty-box *ngIf="entries && entries.length === 0" icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="entries && entries.length === 0" icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate" />
         <ng-container *ngFor="let entry of entries">
             <ion-card *ngIf="!onlyMyEntries || entry.userid === currentUserId">
                 <ion-item class="ion-text-wrap">
-                    <core-user-avatar [user]="entry.user" slot="start" [courseId]="entry.courseid"></core-user-avatar>
+                    <core-user-avatar [user]="entry.user" slot="start" [courseId]="entry.courseid" />
                     <ion-label>
                         <div class="flex-row ion-justify-content-between ion-align-items-center">
                             <h2>
                                 <core-format-text [text]="entry.subject" [contextLevel]="contextLevel"
-                                    [contextInstanceId]="contextInstanceId">
-                                </core-format-text>
+                                    [contextInstanceId]="contextInstanceId" />
                             </h2>
                             <ion-note class="ion-text-end">
                                 {{ 'addon.blog.' + entry.publishTranslated! | translate}}
@@ -49,35 +47,32 @@
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <core-format-text [text]="entry.summary" [component]="this.component" [componentId]="entry.id"
-                                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId">
-                            </core-format-text>
+                                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" />
                         </ion-label>
                     </ion-item>
                     <ion-item class="ion-text-wrap" *ngIf="tagsEnabled && entry.tags && entry.tags!.length > 0">
                         <ion-label>
                             <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
-                            <core-tag-list [tags]="entry.tags"></core-tag-list>
+                            <core-tag-list [tags]="entry.tags" />
                         </ion-label>
                     </ion-item>
                     <core-comments *ngIf="commentsEnabled" [component]="this.component" [itemId]="entry.id" area="format_blog"
-                        [instanceId]="entry.userid" contextLevel="user" [showItem]="true">
-                    </core-comments>
+                        [instanceId]="entry.userid" contextLevel="user" [showItem]="true" />
                     <core-file *ngFor="let file of entry.attachmentfiles" [file]="file" [component]="this.component"
-                        [componentId]="entry.id">
-                    </core-file>
+                        [componentId]="entry.id" />
                     <ion-item *ngIf="entry.uniquehash" [href]="entry.uniquehash" core-link [detail]="true">
                         <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
                     </ion-item>
                 </ion-card-content>
                 <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
                     <ion-note>
-                        <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified
+                        <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" /> {{entry.lastmodified
                         |
                         coreTimeAgo}}
                     </ion-note>
                 </div>
             </ion-card>
         </ng-container>
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError" />
     </core-loading>
 </ion-content>
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 02bab4b3b..2d543551b 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -2,8 +2,7 @@
 <core-navbar-buttons slot="end" prepend>
     <core-context-menu>
         <core-context-menu-item *ngIf="canNavigate && !selectedMonthIsCurrent() && displayNavButtons" [priority]="900"
-            [content]="'addon.calendar.currentmonth' | translate" iconAction="fas-calendar-day" (action)="goToCurrentMonth()">
-        </core-context-menu-item>
+            [content]="'addon.calendar.currentmonth' | translate" iconAction="fas-calendar-day" (action)="goToCurrentMonth()" />
     </core-context-menu>
 </core-navbar-buttons>
 
@@ -14,19 +13,18 @@
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-start" *ngIf="canNavigate">
                     <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
-                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
                 <ion-col class="ion-text-center addon-calendar-period">
                     <h2 id="addon-calendar-monthname">
                         {{ periodName }}
-                        <ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
-                        </ion-spinner>
+                        <ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month" />
                     </h2>
                 </ion-col>
                 <ion-col class="ion-text-end" *ngIf="canNavigate">
                     <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
-                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
             </ion-row>
@@ -50,8 +48,7 @@
                         <!-- Weeks. -->
                         <ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
                             <!-- Empty slots (first week). -->
-                            <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
-                            </ion-col>
+                            <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell" />
                             <ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
                                     "hasevents": day.hasevents,
                                     "today": month.isCurrentMonth && day.istoday,
@@ -76,9 +73,9 @@
                                             [tabindex]="activeView ? 0 : -1">
                                             <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
                                             <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
-                                                [attr.aria-label]="'core.notsent' | translate"></ion-icon>
+                                                [attr.aria-label]="'core.notsent' | translate" />
                                             <ion-icon *ngIf="event.deleted" name="fas-trash"
-                                                [attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
+                                                [attr.aria-label]="'core.deletedoffline' | translate" />
                                             <span class="addon-calendar-event-time">
                                                 {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
                                             </span>
@@ -98,8 +95,7 @@
                                 </div>
                             </ion-col>
                             <!-- Empty slots (last week). -->
-                            <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell">
-                            </ion-col>
+                            <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell" />
                         </ion-row>
                     </div>
                 </ion-grid>
diff --git a/src/addons/calendar/components/filter/filter.html b/src/addons/calendar/components/filter/filter.html
index 65dee4fd4..365e7e72f 100644
--- a/src/addons/calendar/components/filter/filter.html
+++ b/src/addons/calendar/components/filter/filter.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -10,18 +10,18 @@
 <ion-content [fullscreen]="true">
     <ion-list>
         <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
-            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true" />
             <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
-            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end" />
         </ion-item>
-        <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
+        <core-spacer *ngIf="filter.course || filter.category || filter.group" />
         <ng-container *ngIf="filter.course || filter.category || filter.group">
             <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
                 <ion-item class="ion-text-wrap" *ngFor="let course of sortedCourses">
                     <ion-label>
-                        <core-format-text [text]="course.shortname"></core-format-text>
+                        <core-format-text [text]="course.shortname" />
                     </ion-label>
-                    <ion-radio slot="end" [value]="course.id"></ion-radio>
+                    <ion-radio slot="end" [value]="course.id" />
                 </ion-item>
             </ion-radio-group>
         </ng-container>
diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index c16291fdc..1224e95ef 100644
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@@ -1,6 +1,6 @@
 <core-loading [hideUntil]="loaded">
-    <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
-    </core-empty-box>
+    <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar"
+        [message]="'addon.calendar.noevents' | translate" />
 
     <ion-list *ngIf="filteredEvents && filteredEvents.length" class="list-item-limited-width">
         <ng-container *ngFor="let event of filteredEvents">
@@ -8,9 +8,8 @@
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
                     [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
                     <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
-                        [componentId]="event.instance" [showAlt]="false" [purpose]="event.purpose"></core-mod-icon>
-                    <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start" aria-hidden="true">
-                    </ion-icon>
+                        [componentId]="event.instance" [showAlt]="false" [purpose]="event.purpose" />
+                    <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start" aria-hidden="true" />
                     <ion-label>
                         <!-- Add the icon title so accessibility tools read it. -->
                         <span class="sr-only">
@@ -19,18 +18,18 @@
                         </span>
                         <p class="item-heading">
                             <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                                [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                                [contextInstanceId]="event.contextInstanceId" />
                         </p>
                         <p>
-                            <core-format-text [text]="event.formattedtime" [filter]="false"></core-format-text>
+                            <core-format-text [text]="event.formattedtime" [filter]="false" />
                         </p>
                     </ion-label>
                     <ion-note *ngIf="event.offline && !event.deleted" slot="end">
-                        <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-clock" aria-hidden="true" />
                         <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
                     </ion-note>
                     <ion-note *ngIf="event.deleted" slot="end">
-                        <ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" aria-hidden="true" />
                         <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
                     </ion-note>
                 </ion-item>
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index acdb94351..373e65cdd 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -1,30 +1,28 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
-                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true" />
             </ion-button>
             <core-context-menu>
                 <core-context-menu-item *ngIf="!selectedDayIsCurrent()" [priority]="900" [content]="'addon.calendar.today' | translate"
-                    iconAction="fas-calendar-day" (action)="goToCurrentDay()">
-                </core-context-menu-item>
+                    iconAction="fas-calendar-day" (action)="goToCurrentDay()" />
                 <core-context-menu-item [hidden]="!loaded || !selectedDayHasOffline() || !isOnline" [priority]="400"
                     [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event)" [iconAction]="syncIcon"
-                    [closeOnClick]="false">
-                </core-context-menu-item>
+                    [closeOnClick]="false" />
             </core-context-menu>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
@@ -34,7 +32,7 @@
                 <ion-row class="ion-align-items-center">
                     <ion-col class="ion-text-start">
                         <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
-                            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
                     <ion-col class="ion-text-center addon-calendar-period">
@@ -42,7 +40,7 @@
                     </ion-col>
                     <ion-col class="ion-text-end">
                         <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
-                            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
                 </ion-row>
@@ -54,14 +52,13 @@
                         <!-- There is data to be synchronized -->
                         <ion-card class="core-warning-card list-item-limited-width" *ngIf="day.hasOffline">
                             <ion-item>
-                                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                                 <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
                             </ion-item>
                         </ion-card>
 
                         <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar"
-                            [message]="'addon.calendar.noevents' | translate">
-                        </core-empty-box>
+                            [message]="'addon.calendar.noevents' | translate" />
 
                         <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="list-item-limited-width">
                             <ng-container *ngFor="let event of day.filteredEvents">
@@ -70,11 +67,9 @@
                                         (click)="gotoEvent(event.id, day)" [class.item-dimmed]="event.ispast"
                                         [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button [detail]="false">
                                         <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
-                                            [modname]="event.modulename" [componentId]="event.instance" [purpose]="event.purpose">
-                                        </core-mod-icon>
+                                            [modname]="event.modulename" [componentId]="event.instance" [purpose]="event.purpose" />
                                         <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
-                                            aria-hidden="true">
-                                        </ion-icon>
+                                            aria-hidden="true" />
                                         <ion-label>
                                             <!-- Add the icon title so accessibility tools read it. -->
                                             <span class="sr-only">
@@ -84,18 +79,18 @@
                                             </span>
                                             <p class="item-heading">
                                                 <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                                                    [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                                                    [contextInstanceId]="event.contextInstanceId" />
                                             </p>
                                             <p>
-                                                <core-format-text [text]="event.formattedtime" [filter]="false"></core-format-text>
+                                                <core-format-text [text]="event.formattedtime" [filter]="false" />
                                             </p>
                                         </ion-label>
                                         <ion-note *ngIf="event.offline && !event.deleted" slot="end">
-                                            <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
+                                            <ion-icon name="fas-clock" aria-hidden="true" />
                                             <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
                                         </ion-note>
                                         <ion-note *ngIf="event.deleted" slot="end">
-                                            <ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
+                                            <ion-icon name="fas-trash" aria-hidden="true" />
                                             <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
                                         </ion-note>
                                     </ion-item>
@@ -111,7 +106,7 @@
     <!-- Create a calendar event. -->
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canCreate && loaded">
         <ion-fab-button (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'addon.calendar.newevent' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 09a702814..f949796e8 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
@@ -20,9 +20,8 @@
                 <ion-label position="stacked">
                     <p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</p>
                 </ion-label>
-                <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name">
-                </ion-input>
-                <core-input-errors [control]="form.controls.name" [errorMessages]="errors"></core-input-errors>
+                <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name" />
+                <core-input-errors [control]="form.controls.name" [errorMessages]="errors" />
             </ion-item>
 
             <!-- Date. -->
@@ -31,9 +30,8 @@
                     <p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
                 </ion-label>
                 <ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
-                    [max]="maxDate" [min]="minDate" [displayTimezone]="displayTimezone">
-                </ion-datetime>
-                <core-input-errors [control]="form.controls.timestart" [errorMessages]="errors"></core-input-errors>
+                    [max]="maxDate" [min]="minDate" [displayTimezone]="displayTimezone" />
+                <core-input-errors [control]="form.controls.timestart" [errorMessages]="errors" />
             </ion-item>
 
             <!-- Type. -->
@@ -108,7 +106,7 @@
                 <!-- Loading groups. -->
                 <ion-item class="ion-text-wrap" *ngIf="loadingGroups">
                     <ion-label>
-                        <ion-spinner *ngIf="loadingGroups" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner *ngIf="loadingGroups" [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
             </ng-container>
@@ -121,7 +119,7 @@
                     </ion-label>
                     <ion-button fill="clear" (click)="addReminder()" slot="end"
                         [attr.aria-label]="'addon.calendar.setnewreminder' | translate">
-                        <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item-divider>
                 <ion-item *ngFor="let reminder of reminders" class="ion-text-wrap">
@@ -129,7 +127,7 @@
                         <p>{{ reminder.label }}</p>
                     </ion-label>
                     <ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate" slot="end">
-                        <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
             </ng-container>
@@ -146,31 +144,30 @@
                         <ion-label>
                             <p>{{ 'addon.calendar.durationnone' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="end" [value]="0"></ion-radio>
+                        <ion-radio slot="end" [value]="0" />
                     </ion-item>
                     <ion-item>
                         <ion-label>
                             <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="end" [value]="1"></ion-radio>
+                        <ion-radio slot="end" [value]="1" />
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
-                        <ion-label position="stacked"></ion-label>
+                        <ion-label position="stacked" />
                         <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
                             [placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat"
-                            [displayTimezone]="displayTimezone">
-                        </ion-datetime>
+                            [displayTimezone]="displayTimezone" />
                     </ion-item>
                     <ion-item>
                         <ion-label>
                             <p>{{ 'addon.calendar.durationminutes' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="end" [value]="2"></ion-radio>
+                        <ion-radio slot="end" [value]="2" />
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 2">
                         <ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
                         <ion-input type="number" name="timedurationminutes" slot="end"
-                            [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes"></ion-input>
+                            [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes" />
                     </ion-item>
                 </ion-radio-group>
             </div>
@@ -181,14 +178,13 @@
                     <ion-label>
                         <p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
                     </ion-label>
-                    <ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
+                    <ion-checkbox slot="end" formControlName="repeat" />
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label position="stacked">
                         <p class="item-heading">{{ 'addon.calendar.repeatweeksl' | translate }}</p>
                     </ion-label>
-                    <ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value">
-                    </ion-input>
+                    <ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value" />
                 </ion-item>
             </ng-container>
 
@@ -204,13 +200,13 @@
                         <ion-label>
                             <p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
                         </ion-label>
-                        <ion-radio slot="end" value="1"></ion-radio>
+                        <ion-radio slot="end" value="1" />
                     </ion-item>
                     <ion-item>
                         <ion-label>
                             <p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="end" value="0"></ion-radio>
+                        <ion-radio slot="end" value="0" />
                     </ion-item>
                 </ion-radio-group>
             </div>
@@ -222,7 +218,7 @@
                 </ion-label>
                 <core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
                     [placeholder]="'core.description' | translate" name="description" [component]="component" [componentId]="eventId"
-                    [autoSave]="false"></core-rich-text-editor>
+                    [autoSave]="false" />
             </ion-item>
 
             <!-- Location. -->
@@ -230,8 +226,7 @@
                 <ion-label position="stacked">
                     <p class="item-heading">{{ 'core.location' | translate }}</p>
                 </ion-label>
-                <ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
-                </ion-input>
+                <ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location" />
             </ion-item>
         </form>
         <div collapsible-footer appearOnBottom *ngIf="loaded && !error" slot="fixed">
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index 81a83d325..1af4abd75 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -1,42 +1,38 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="event">
-                <core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId">
-                </core-format-text>
+                <core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <core-context-menu>
                 <core-context-menu-item [hidden]="!eventLoaded || (!hasOffline && event && !event.deleted) || !isOnline" [priority]="400"
                     [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
-                    [iconAction]="syncIcon" [closeOnClick]="false">
-                </core-context-menu-item>
+                    [iconAction]="syncIcon" [closeOnClick]="false" />
                 <core-context-menu-item [hidden]="!event || !event.canedit || event.deleted || (!canEdit && event.id > 0)" [priority]="300"
-                    [content]="'core.edit' | translate" (action)="openEdit()" iconAction="fas-pen">
-                </core-context-menu-item>
+                    [content]="'core.edit' | translate" (action)="openEdit()" iconAction="fas-pen" />
                 <core-context-menu-item [hidden]="!event || !event.candelete || event.deleted" [priority]="200"
-                    [content]="'core.delete' | translate" (action)="deleteEvent()" iconAction="fas-trash"></core-context-menu-item>
+                    [content]="'core.delete' | translate" (action)="deleteEvent()" iconAction="fas-trash" />
                 <core-context-menu-item [hidden]="!event || !event.deleted" [priority]="200" [content]="'core.restore' | translate"
-                    (action)="undoDelete()" iconAction="fas-rotate-left"></core-context-menu-item>
+                    (action)="undoDelete()" iconAction="fas-rotate-left" />
             </core-context-menu>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="events">
     <ion-refresher slot="fixed" [disabled]="!eventLoaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="eventLoaded">
         <ion-list *ngIf="event">
             <ion-item class="ion-text-wrap addon-calendar-event" collapsible [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                 <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
-                    [componentId]="event.instance" slot="start" [purpose]="event.purpose"></core-mod-icon>
-                <ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start">
-                </ion-icon>
+                    [componentId]="event.instance" slot="start" [purpose]="event.purpose" />
+                <ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start" />
                 <ion-label>
                     <!-- Add the icon title so accessibility tools read it. -->
                     <span class="sr-only">
@@ -45,25 +41,24 @@
                     </span>
                     <h1>
                         <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                            [contextInstanceId]="event.contextInstanceId">
-                        </core-format-text>
+                            [contextInstanceId]="event.contextInstanceId" />
                     </h1>
                 </ion-label>
             </ion-item>
             <!-- There is data to be synchronized -->
             <ion-card class="core-warning-card" *ngIf="hasOffline || event.deleted">
                 <ion-item>
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendarevent' | translate} }}</ion-label>
                 </ion-item>
             </ion-card>
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.calendar.when' | translate }}</p>
-                    <core-format-text [text]="event.formattedtime" [filter]="false"></core-format-text>
+                    <core-format-text [text]="event.formattedtime" [filter]="false" />
                 </ion-label>
                 <ion-note slot="end" *ngIf="event.deleted">
-                    <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
+                    <ion-icon name="fas-trash" aria-hidden="true" /> {{ 'core.deletedoffline' | translate }}
                 </ion-note>
             </ion-item>
             <ion-item>
@@ -76,8 +71,7 @@
                 <ion-label>
                     <p class="item-heading">{{ 'core.course' | translate}}</p>
                     <p>
-                        <core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
-                        </core-format-text>
+                        <core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -85,8 +79,7 @@
                 <ion-label>
                     <p class="item-heading">{{ 'core.group' | translate}}</p>
                     <p>
-                        <core-format-text [text]="groupName" contextLevel="course" [contextInstanceId]="event.courseid">
-                        </core-format-text>
+                        <core-format-text [text]="groupName" contextLevel="course" [contextInstanceId]="event.courseid" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -94,8 +87,7 @@
                 <ion-label>
                     <p class="item-heading">{{ 'core.category' | translate}}</p>
                     <p>
-                        <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
-                        </core-format-text>
+                        <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -104,7 +96,7 @@
                     <p class="item-heading">{{ 'core.description' | translate}}</p>
                     <p>
                         <core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
-                            [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                            [contextInstanceId]="event.contextInstanceId" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -114,7 +106,7 @@
                     <p>
                         <a [href]="event.encodedLocation" core-link auto-login="no">
                             <core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
-                                [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                                [contextInstanceId]="event.contextInstanceId" />
                         </a>
                     </p>
                 </ion-label>
@@ -142,7 +134,7 @@
                     </ion-label>
                     <ion-button fill="clear" (click)="deleteReminder(reminder.id, $event)" [attr.aria-label]="'core.delete' | translate"
                         slot="end">
-                        <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
             </ng-container>
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index 39f929563..6e3c382bb 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -1,55 +1,52 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
-                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true" />
             </ion-button>
             <core-context-menu>
                 <core-context-menu-item *ngIf="showCalendar" [priority]="800" [content]="'addon.calendar.upcomingevents' | translate"
-                    iconAction="fas-table-list" (action)="toggleDisplay()"></core-context-menu-item>
+                    iconAction="fas-table-list" (action)="toggleDisplay()" />
                 <core-context-menu-item *ngIf="!showCalendar" [priority]="800" [content]="'addon.calendar.monthlyview' | translate"
-                    iconAction="fas-calendar-days" (action)="toggleDisplay()"></core-context-menu-item>
+                    iconAction="fas-calendar-days" (action)="toggleDisplay()" />
                 <core-context-menu-item [priority]="600" [content]="'core.settings.settings' | translate" (action)="openSettings()"
-                    iconAction="fas-gears">
-                </core-context-menu-item>
+                    iconAction="fas-gears" />
                 <core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline" [priority]="400"
                     [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
-                    [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
+                    [iconAction]="syncIcon" [closeOnClick]="false" />
             </core-context-menu>
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <!-- There is data to be synchronized -->
     <ion-card class="core-warning-card" *ngIf="hasOffline">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}</ion-label>
         </ion-item>
     </ion-card>
 
     <addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [filter]="filter"
-        [displayNavButtons]="showCalendar" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)">
-    </addon-calendar-calendar>
+        [displayNavButtons]="showCalendar" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)" />
 
-    <addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [filter]="filter" (onEventClicked)="gotoEvent($event)">
-    </addon-calendar-upcoming-events>
+    <addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [filter]="filter" (onEventClicked)="gotoEvent($event)" />
 
     <!-- Create a calendar event. -->
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canCreate">
         <ion-fab-button (click)="openEdit()" [attr.aria-label]="'addon.calendar.newevent' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'addon.calendar.newevent' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/calendar/pages/settings/settings.html b/src/addons/calendar/pages/settings/settings.html
index d8982f79b..7ca79cf28 100644
--- a/src/addons/calendar/pages/settings/settings.html
+++ b/src/addons/calendar/pages/settings/settings.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.settings.settings' | translate }}</h1>
diff --git a/src/addons/competency/pages/competencies/competencies.html b/src/addons/competency/pages/competencies/competencies.html
index 33b3afe43..9a4b264c5 100644
--- a/src/addons/competency/pages/competencies/competencies.html
+++ b/src/addons/competency/pages/competencies/competencies.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId">
-                </core-format-text>
+                <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" />
             </h1>
         </ion-title>
     </ion-toolbar>
@@ -14,7 +13,7 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCompetencies($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="competencies.loaded">
             <ion-list>
@@ -24,8 +23,7 @@
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="competency.competency.shortname" [contextLevel]="contextLevel"
-                                [contextInstanceId]="contextInstanceId">
-                            </core-format-text> <em>{{competency.competency.idnumber}}</em>
+                                [contextInstanceId]="contextInstanceId" /> <em>{{competency.competency.idnumber}}</em>
                         </p>
                     </ion-label>
                     <ion-badge slot="end" *ngIf="competency.usercompetency"
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index 9d98ab3d9..3e984f5b7 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -1,25 +1,24 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="competency">
                 <core-format-text [text]="competency.competency.competency.shortname" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId">
-                </core-format-text> <small>{{ competency.competency.competency.idnumber }}</small>
+                    [contextInstanceId]="contextInstanceId" /> <small>{{ competency.competency.competency.idnumber }}</small>
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="competencies" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
-                <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+                <core-user-avatar [user]="user" slot="start" />
                 <ion-label>
                     <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
@@ -30,8 +29,7 @@
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.competency.description">
                 <ion-label>
                     <core-format-text [text]="competency.competency.competency.description" [contextLevel]="contextLevel"
-                        [contextInstanceId]="contextInstanceId">
-                    </core-format-text>
+                        [contextInstanceId]="contextInstanceId" />
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap only-links">
@@ -40,26 +38,22 @@
                     <p>
                         <a *ngIf="competency.competency.comppath.showlinks" [href]="competencyFrameworkUrl" core-link>
                             <core-format-text [text]="competency.competency.comppath.framework.name" [contextLevel]="contextLevel"
-                                [contextInstanceId]="contextInstanceId">
-                            </core-format-text>
+                                [contextInstanceId]="contextInstanceId" />
                         </a>
                         <ng-container *ngIf="!competency.competency.comppath.showlinks">
                             <core-format-text [text]="competency.competency.comppath.framework.name" [contextLevel]="contextLevel"
-                                [contextInstanceId]="contextInstanceId">
-                            </core-format-text>
+                                [contextInstanceId]="contextInstanceId" />
                         </ng-container>
                         &nbsp;/&nbsp;
                         <ng-container *ngFor="let ancestor of competency.competency.comppath.ancestors">
                             <button *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)"
                                 class="as-link">
                                 <core-format-text [text]="ancestor.name" [contextLevel]="contextLevel"
-                                    [contextInstanceId]="contextInstanceId">
-                                </core-format-text>
+                                    [contextInstanceId]="contextInstanceId" />
                             </button>
                             <ng-container *ngIf="!competency.competency.comppath.showlinks">
                                 <core-format-text [text]="ancestor.name" [contextLevel]="contextLevel"
-                                    [contextInstanceId]="contextInstanceId">
-                                </core-format-text>
+                                    [contextInstanceId]="contextInstanceId" />
                             </ng-container>
                             <ng-container *ngIf="!ancestor.last">&nbsp;/&nbsp;</ng-container>
                         </ng-container>
@@ -76,8 +70,7 @@
                         <p *ngFor="let relatedcomp of competency.competency.relatedcompetencies">
                             <button (click)="openCompetencySummary(relatedcomp.id)" class="as-link">
                                 <core-format-text [text]="relatedcomp.shortname" [contextLevel]="contextLevel"
-                                    [contextInstanceId]="contextInstanceId">
-                                </core-format-text> - {{ relatedcomp.idnumber }}
+                                    [contextInstanceId]="contextInstanceId" /> - {{ relatedcomp.idnumber }}
                             </button>
                         </p>
                     </ng-container>
@@ -91,12 +84,10 @@
                     </p>
                     <ion-item class="ion-text-wrap" *ngFor="let activity of coursemodules" [href]="activity.url"
                         [attr.aria-label]="activity.name" core-link capture="true">
-                        <core-mod-icon slot="start" [modicon]="activity.iconurl" [showAlt]="false" *ngIf="activity.iconurl">
-                        </core-mod-icon>
+                        <core-mod-icon slot="start" [modicon]="activity.iconurl" [showAlt]="false" *ngIf="activity.iconurl" />
                         <ion-label>
                             <core-format-text [text]="activity.name" contextLevel="module" [contextInstanceId]="activity.id"
-                                [courseId]="courseId">
-                            </core-format-text>
+                                [courseId]="courseId" />
                         </ion-label>
                     </ion-item>
                 </ion-label>
@@ -136,7 +127,7 @@
             <ion-card *ngFor="let evidence of competency.evidence">
                 <ion-item class="ion-text-wrap" *ngIf="evidence.actionuser" core-user-link [userId]="evidence.actionuser.id"
                     [courseId]="courseId">
-                    <core-user-avatar [user]="evidence.actionuser" slot="start" [linkProfile]="false"></core-user-avatar>
+                    <core-user-avatar [user]="evidence.actionuser" slot="start" [linkProfile]="false" />
                     <ion-label>
                         <p class="item-heading">{{ evidence.actionuser.fullname }}</p>
                         <p>{{ evidence.timemodified * 1000 | coreFormatDate }}</p>
diff --git a/src/addons/competency/pages/competencysummary/competencysummary.html b/src/addons/competency/pages/competencysummary/competencysummary.html
index 3c354f39f..7271d983c 100644
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@@ -1,28 +1,26 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="competency">
                 <core-format-text [text]="competency.competency.shortname" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId">
-                </core-format-text> <small>{{ competency.competency.idnumber }}</small>
+                    [contextInstanceId]="contextInstanceId" /> <small>{{ competency.competency.idnumber }}</small>
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="competency">
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                 <ion-label>
                     <core-format-text [text]="competency.competency.description" [contextLevel]="contextLevel"
-                        [contextInstanceId]="contextInstanceId">
-                    </core-format-text>
+                        [contextInstanceId]="contextInstanceId" />
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
@@ -30,14 +28,12 @@
                     <p class="item-heading">{{ 'addon.competency.path' | translate }}</p>
                     <p>
                         <core-format-text [text]="competency.comppath.framework.name" [contextLevel]="contextLevel"
-                            [contextInstanceId]="contextInstanceId">
-                        </core-format-text>
+                            [contextInstanceId]="contextInstanceId" />
                         <ng-container *ngFor="let ancestor of competency.comppath.ancestors">
                             &nbsp;/&nbsp;
                             <button class="as-link" (click)="openCompetencySummary(ancestor.id)">
                                 <core-format-text [text]="ancestor.name" [contextLevel]="contextLevel"
-                                    [contextInstanceId]="contextInstanceId">
-                                </core-format-text>
+                                    [contextInstanceId]="contextInstanceId" />
                             </button>
                         </ng-container>
                     </p>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index 687d8f88c..1547cbb80 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.competency.coursecompetencies' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
@@ -29,8 +29,7 @@
                         {x: courseCompetencies.statistics.proficientcompetencycount, y: courseCompetencies.statistics.competencycount} } }}
                     </span>
                     <core-progress-bar [progress]="courseCompetencies.statistics.proficientcompetencypercentage"
-                        ariaDescribedBy="addon-competency-course-{{courseId}}-progress">
-                    </core-progress-bar>
+                        ariaDescribedBy="addon-competency-course-{{courseId}}-progress" />
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap"
@@ -39,8 +38,8 @@
                     <p class="item-heading">{{ 'addon.competency.competenciesmostoftennotproficientincourse' | translate }}</p>
                     <p *ngFor="let comp of courseCompetencies.statistics.leastproficient">
                         <button class="as-link" (click)="openCompetencySummary(comp.id)">
-                            <core-format-text [text]="comp.shortname" contextLevel="course" [contextInstanceId]="courseId">
-                            </core-format-text> - {{ comp.idnumber }}
+                            <core-format-text [text]="comp.shortname" contextLevel="course" [contextInstanceId]="courseId" /> - {{
+                            comp.idnumber }}
                         </button>
                     </p>
                 </ion-label>
@@ -52,15 +51,14 @@
         </h2>
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
-                <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+                <core-user-avatar [user]="user" slot="start" />
                 <ion-label>
                     <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
         </ion-card>
         <core-empty-box *ngIf="courseCompetencies && courseCompetencies.statistics.competencycount === 0" icon="fas-award"
-            message="{{ 'addon.competency.nocompetenciesincourse' | translate }}">
-        </core-empty-box>
+            message="{{ 'addon.competency.nocompetenciesincourse' | translate }}" />
 
         <div *ngIf="competencies.loaded">
             <ion-card *ngFor="let competency of competencies.items">
@@ -68,8 +66,8 @@
                     [attr.aria-label]="competency.competency.shortname" [detail]="true" button>
                     <ion-label>
                         <p class="item-heading">
-                            <core-format-text [text]="competency.competency.shortname" contextLevel="course" [contextInstanceId]="courseId">
-                            </core-format-text> <em>{{competency.competency.idnumber}}</em>
+                            <core-format-text [text]="competency.competency.shortname" contextLevel="course"
+                                [contextInstanceId]="courseId" /> <em>{{competency.competency.idnumber}}</em>
                         </p>
                     </ion-label>
                     <ion-badge slot="end" *ngIf="competency.usercompetencycourse && competency.usercompetencycourse.gradename"
@@ -81,8 +79,7 @@
                     <ion-label>
                         <p *ngIf="competency.competency.description">
                             <core-format-text [text]="competency.competency.description" contextLevel="course"
-                                [contextInstanceId]="courseId">
-                            </core-format-text>
+                                [contextInstanceId]="courseId" />
                         </p>
                         <div>
                             <p class="item-heading">{{ 'addon.competency.path' | translate }}</p>
@@ -90,24 +87,20 @@
                                 <a *ngIf="competency.comppath.showlinks" [href]="getCompetencyFrameworkUrl(competency)" core-link
                                     [title]="competency.comppath.framework.name">
                                     <core-format-text [text]="competency.comppath.framework.name" contextLevel="course"
-                                        [contextInstanceId]="courseId">
-                                    </core-format-text>
+                                        [contextInstanceId]="courseId" />
                                 </a>
                                 <ng-container *ngIf="!competency.comppath.showlinks">
                                     <core-format-text [text]="competency.comppath.framework.name" contextLevel="course"
-                                        [contextInstanceId]="courseId">
-                                    </core-format-text>
+                                        [contextInstanceId]="courseId" />
                                 </ng-container>
                                 &nbsp;/&nbsp;
                                 <ng-container *ngFor="let ancestor of competency.comppath.ancestors">
                                     <button class="as-link" *ngIf="competency.comppath.showlinks"
                                         (click)="openCompetencySummary(ancestor.id)">
-                                        <core-format-text [text]="ancestor.name" contextLevel="course" [contextInstanceId]="courseId">
-                                        </core-format-text>
+                                        <core-format-text [text]="ancestor.name" contextLevel="course" [contextInstanceId]="courseId" />
                                     </button>
                                     <ng-container *ngIf="!competency.comppath.showlinks">
-                                        <core-format-text [text]="ancestor.name" contextLevel="course" [contextInstanceId]="courseId">
-                                        </core-format-text>
+                                        <core-format-text [text]="ancestor.name" contextLevel="course" [contextInstanceId]="courseId" />
                                     </ng-container>
                                     <ng-container *ngIf="!ancestor.last">&nbsp;/&nbsp;</ng-container>
                                 </ng-container>
@@ -126,12 +119,10 @@
                             </p>
                             <ion-item class="ion-text-wrap core-course-module-handler" [attr.aria-label]="activity.name" core-link
                                 *ngFor="let activity of competency.coursemodules" [href]="activity.url" capture="true">
-                                <core-mod-icon slot="start" [modicon]="activity.iconurl" [showAlt]="false" *ngIf="activity.iconurl">
-                                </core-mod-icon>
+                                <core-mod-icon slot="start" [modicon]="activity.iconurl" [showAlt]="false" *ngIf="activity.iconurl" />
                                 <ion-label>
                                     <core-format-text [text]="activity.name" contextLevel="module" [contextInstanceId]="activity.id"
-                                        [courseId]="courseId">
-                                    </core-format-text>
+                                        [courseId]="courseId" />
                                 </ion-label>
                             </ion-item>
                         </div>
@@ -143,8 +134,7 @@
                             <ion-item class="ion-text-wrap" *ngFor="let plan of competency.plans" [href]="plan.url"
                                 [attr.aria-label]="plan.name" core-link capture="true">
                                 <ion-label>
-                                    <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid">
-                                    </core-format-text>
+                                    <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid" />
                                 </ion-label>
                             </ion-item>
                         </div>
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 8bbcd992d..be91b266e 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -1,25 +1,24 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="plan">
-                <core-format-text [text]="plan.plan.name" contextLevel="user" [contextInstanceId]="plan.plan.userid">
-                </core-format-text>
+                <core-format-text [text]="plan.plan.name" contextLevel="user" [contextInstanceId]="plan.plan.userid" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="plans" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="competencies.loaded">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+                    <core-user-avatar [user]="user" slot="start" />
                     <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
@@ -29,8 +28,7 @@
                 <ion-item class="ion-text-wrap" *ngIf="plan.plan.description">
                     <ion-label>
                         <p>
-                            <core-format-text [text]="plan.plan.description" contextLevel="user" [contextInstanceId]="plan.plan.userid">
-                            </core-format-text>
+                            <core-format-text [text]="plan.plan.description" contextLevel="user" [contextInstanceId]="plan.plan.userid" />
                         </p>
                     </ion-label>
                 </ion-item>
@@ -50,8 +48,7 @@
                     <ion-label>
                         <p class="item-heading">{{ 'addon.competency.template' | translate }}</p>
                         <p>
-                            <core-format-text [text]="plan.plan.template.shortname" contextLevel="system" [contextInstanceId]="0">
-                            </core-format-text>
+                            <core-format-text [text]="plan.plan.template.shortname" contextLevel="system" [contextInstanceId]="0" />
                         </p>
                     </ion-label>
                 </ion-item>
@@ -64,8 +61,7 @@
                         </p>
                         <core-progress-bar [progress]="plan.proficientcompetencypercentage"
                             [text]="plan.proficientcompetencypercentageformatted"
-                            ariaDescribedBy="addon-competency-plan-{{plan.plan.id}}-progress">
-                        </core-progress-bar>
+                            ariaDescribedBy="addon-competency-plan-{{plan.plan.id}}-progress" />
                     </ion-label>
                 </ion-item>
             </ion-list>
@@ -85,8 +81,7 @@
                     <ion-label>
                         <p class="item-heading">
                             <core-format-text [text]="competency.competency.shortname" contextLevel="user"
-                                [contextInstanceId]="plan.plan.userid">
-                            </core-format-text> <em>{{competency.competency.idnumber}}</em>
+                                [contextInstanceId]="plan.plan.userid" /> <em>{{competency.competency.idnumber}}</em>
                         </p>
                     </ion-label>
                     <ion-badge *ngIf="competency.usercompetencyplan" slot="end"
diff --git a/src/addons/competency/pages/planlist/planlist.html b/src/addons/competency/pages/planlist/planlist.html
index f980c458b..2f1901623 100644
--- a/src/addons/competency/pages/planlist/planlist.html
+++ b/src/addons/competency/pages/planlist/planlist.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.competency.userplans' | translate }}</h1>
@@ -11,19 +11,16 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!plans.loaded" (ionRefresh)="refreshLearningPlans($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="plans.loaded">
-            <core-empty-box *ngIf="plans.empty" icon="fas-route" [message]="'addon.competency.noplanswerecreated' | translate">
-
-            </core-empty-box>
+            <core-empty-box *ngIf="plans.empty" icon="fas-route" [message]="'addon.competency.noplanswerecreated' | translate" />
             <ion-list *ngIf="!plans.empty" class="ion-no-margin">
                 <ion-item class="ion-text-wrap" *ngFor="let plan of plans.items" [attr.aria-label]="plan.name" (click)="plans.select(plan)"
                     [attr.aria-current]="plans.getItemAriaCurrent(plan)" button [detail]="true">
                     <ion-label>
                         <p class="item-heading">
-                            <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid">
-                            </core-format-text>
+                            <core-format-text [text]="plan.name" contextLevel="user" [contextInstanceId]="plan.userid" />
                         </p>
                         <p *ngIf="plan.duedate > 0">
                             {{ 'addon.competency.duedate' | translate }}:&nbsp;
diff --git a/src/addons/coursecompletion/pages/report/report.html b/src/addons/coursecompletion/pages/report/report.html
index d31d01da6..b94dd4763 100644
--- a/src/addons/coursecompletion/pages/report/report.html
+++ b/src/addons/coursecompletion/pages/report/report.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
@@ -10,11 +10,11 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!completionLoaded" (ionRefresh)="refreshCompletion($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="completionLoaded">
         <ion-item class="ion-text-wrap" *ngIf="user">
-            <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false" />
             <ion-label>
                 <p class="item-heading">{{user.fullname}}</p>
             </ion-label>
@@ -44,10 +44,10 @@
             <ion-item class="ion-hide-md-up ion-text-wrap" *ngFor="let criteria of completion.completions">
                 <ion-label>
                     <p class="item-heading">
-                        <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false"></core-format-text>
+                        <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false" />
                     </p>
                     <p>
-                        <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false"></core-format-text>
+                        <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false" />
                     </p>
                 </ion-label>
                 <strong slot="end" *ngIf="criteria.complete">{{ 'core.yes' | translate }}</strong>
@@ -65,23 +65,23 @@
                     </ion-row>
                     <ion-row *ngFor="let criteria of completion.completions">
                         <ion-col>
-                            <core-format-text clean="true" [text]="criteria.details.type" [filter]="false"></core-format-text>
+                            <core-format-text clean="true" [text]="criteria.details.type" [filter]="false" />
                         </ion-col>
                         <ion-col>
-                            <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false"></core-format-text>
+                            <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false" />
                         </ion-col>
                         <ion-col>
-                            <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false"></core-format-text>
+                            <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false" />
                         </ion-col>
                         <ion-col>
-                            <core-format-text [text]="criteria.details.status" [filter]="false"></core-format-text>
+                            <core-format-text [text]="criteria.details.status" [filter]="false" />
                         </ion-col>
                         <ion-col *ngIf="criteria.complete">{{ 'core.yes' | translate }}</ion-col>
                         <ion-col *ngIf="!criteria.complete">{{ 'core.no' | translate }}</ion-col>
                         <ion-col *ngIf="criteria.timecompleted">
                             {{ criteria.timecompleted * 1000 | coreFormatDate :'strftimedatetimeshort' }}
                         </ion-col>
-                        <ion-col *ngIf="!criteria.timecompleted"></ion-col>
+                        <ion-col *ngIf="!criteria.timecompleted" />
                     </ion-row>
                 </ion-label>
             </ion-item>
@@ -103,7 +103,7 @@
 
         <ion-card class="core-warning-card" *ngIf="!tracked">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.coursecompletion.nottracked' | translate }}</ion-label>
             </ion-item>
         </ion-card>
diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.html b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
index 2a84773ea..ffecacf69 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messageoutput_airnotifier.processorsettingsdesc' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshDevices($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ng-container *ngFor="let platform of platformDevices">
@@ -33,8 +33,7 @@
                             </p>
                         </ion-label>
                         <core-button-with-spinner [loading]="device.updating" slot="end">
-                            <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
-                            </ion-toggle>
+                            <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)" />
                         </core-button-with-spinner>
                     </ion-item>
                 </ion-list>
diff --git a/src/addons/messages/components/conversation-info/conversation-info.html b/src/addons/messages/components/conversation-info/conversation-info.html
index 8d53b3dce..1e8b058d3 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -5,14 +5,14 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
@@ -23,12 +23,11 @@
                         onError="this.src='assets/img/group-avatar.svg'">
                 </div>
                 <h2>
-                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
                 </h2>
                 <p>
                     <core-format-text *ngIf="conversation.subname" [text]="conversation.subname" contextLevel="system"
-                        [contextInstanceId]="0">
-                    </core-format-text>
+                        [contextInstanceId]="0" />
                 </p>
                 <p>{{ 'addon.messages.numparticipants' | translate:{$a: conversation.membercount} }}</p>
             </ion-label>
@@ -36,19 +35,16 @@
 
         <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let member of members" (click)="closeModal(member.id)"
             [detail]="true" button>
-            <core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" slot="start">
-            </core-user-avatar>
+            <core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" slot="start" />
             <ion-label>
                 <p class="item-heading">
                     {{ member.fullname }}
                     <ion-icon name="fas-user-slash" *ngIf="member.isblocked"
-                        [attr.aria-label]="'addon.messages.contactblocked' | translate">
-                    </ion-icon>
+                        [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                 </p>
             </ion-label>
         </ion-item>
 
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreMembers($event)" [error]="loadMoreError">
-        </core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreMembers($event)" [error]="loadMoreError" />
     </core-loading>
 </ion-content>
diff --git a/src/addons/messages/pages/contacts-35/contacts.html b/src/addons/messages/pages/contacts-35/contacts.html
index 4086c4c08..209e28930 100644
--- a/src/addons/messages/pages/contacts-35/contacts.html
+++ b/src/addons/messages/pages/contacts-35/contacts.html
@@ -1,32 +1,32 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.contacts' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
-            <core-context-menu></core-context-menu>
+            <core-context-menu />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'addon.messages.contactname' | translate"
-            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesContacts"></core-search-box>
+            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesContacts" />
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
             <core-empty-box *ngIf="!hasContacts && searchString === ''" icon="fas-address-book"
-                [message]="'addon.messages.contactlistempty' | translate"></core-empty-box>
+                [message]="'addon.messages.contactlistempty' | translate" />
 
             <core-empty-box *ngIf="!hasContacts && searchString !== ''" icon="fas-address-book"
-                [message]="'addon.messages.nousersfound' | translate"></core-empty-box>
+                [message]="'addon.messages.nousersfound' | translate" />
 
             <ion-list *ngFor="let contactType of contactTypes" class="ion-no-margin">
                 <ng-container *ngIf="contacts[contactType] && (contacts[contactType].length > 0 || contactType === searchType)">
@@ -44,7 +44,7 @@
                             *ngIf="contact.profileimageurl || contact.profileimageurlsmall" [attr.aria-label]="contact.fullname"
                             (click)="gotoDiscussion(contact.id)" [detail]="true" button
                             [attr.aria-current]="contact.id === discussionUserId ? 'page' : 'false'">
-                            <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
+                            <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus" />
                             <ion-label>
                                 <p class="item-heading">{{ contact.fullname }}</p>
                             </ion-label>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index 5903b00ee..613d674f0 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -1,17 +1,17 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.contacts' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
-                <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass" 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></core-context-menu>
+            <core-context-menu />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
@@ -23,7 +23,7 @@
             <core-tab [title]="'addon.messages.contacts' | translate" (ionSelect)="selectTab('confirmed')">
                 <ng-template>
                     <ion-refresher slot="fixed" [disabled]="!confirmedLoaded" (ionRefresh)="refreshData($event.target)">
-                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
                     </ion-refresher>
                     <core-loading [hideUntil]="confirmedLoaded">
                         <ion-list class="ion-no-margin" *ngIf="confirmedContacts.length">
@@ -31,27 +31,22 @@
                                 *ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" [detail]="true"
                                 [attr.aria-current]="contact.id === selectedUserId ? 'page' : 'false'">
                                 <core-user-avatar slot="start" [user]="contact" [checkOnline]="contact.showonlinestatus"
-                                    [linkProfile]="false">
-                                </core-user-avatar>
+                                    [linkProfile]="false" />
                                 <ion-label>
                                     <p class="item-heading">
-                                        <core-format-text [text]="contact.fullname" contextLevel="system" [contextInstanceId]="0">
-                                        </core-format-text>
+                                        <core-format-text [text]="contact.fullname" contextLevel="system" [contextInstanceId]="0" />
                                         <ion-icon *ngIf="contact.isblocked" name="fas-user-slash" slot="end"
-                                            [attr.aria-label]="'addon.messages.contactblocked' | translate">
-                                        </ion-icon>
+                                            [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                                     </p>
                                 </ion-label>
                             </ion-item>
                         </ion-list>
 
                         <core-empty-box *ngIf="!confirmedContacts.length" icon="far-address-book"
-                            [message]="'addon.messages.nocontactsgetstarted' | translate">
-                        </core-empty-box>
+                            [message]="'addon.messages.nocontactsgetstarted' | translate" />
 
                         <core-infinite-loading [enabled]="confirmedCanLoadMore" (action)="loadMore($event)" [error]="confirmedLoadMoreError"
-                            position="bottom">
-                        </core-infinite-loading>
+                            position="bottom" />
                     </core-loading>
                 </ng-template>
             </core-tab>
@@ -61,17 +56,16 @@
                 badgeA11yText="addon.messages.pendingcontactrequests">
                 <ng-template>
                     <ion-refresher slot="fixed" [disabled]="!requestsLoaded" (ionRefresh)="refreshData($event.target)">
-                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
                     </ion-refresher>
                     <core-loading [hideUntil]="requestsLoaded">
                         <ion-list class="ion-no-margin" *ngIf="requests.length">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
                                 [attr.aria-label]="request.fullname" (click)="selectUser(request.id)" button
                                 [attr.aria-current]="request.id === selectedUserId ? 'page' : 'false'" [detail]="true">
-                                <core-user-avatar slot="start" [user]="request" [linkProfile]="false"></core-user-avatar>
+                                <core-user-avatar slot="start" [user]="request" [linkProfile]="false" />
                                 <ion-label>
-                                    <core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0">
-                                    </core-format-text>
+                                    <core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0" />
                                     <p *ngIf="!request.iscontact">
                                         {{ 'addon.messages.wouldliketocontactyou' | translate }}
                                     </p>
@@ -79,11 +73,9 @@
                             </ion-item>
                         </ion-list>
                         <core-empty-box *ngIf="!requests.length" icon="far-address-book"
-                            [message]="'addon.messages.nocontactrequests' | translate">
-                        </core-empty-box>
+                            [message]="'addon.messages.nocontactrequests' | translate" />
                         <core-infinite-loading [enabled]="requestsCanLoadMore" (action)="loadMore($event)" [error]="requestsLoadMoreError"
-                            position="bottom">
-                        </core-infinite-loading>
+                            position="bottom" />
                     </core-loading>
                 </ng-template>
             </core-tab>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index 3a6610ec0..db3c27112 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -1,67 +1,57 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt=""
                     onError="this.src='assets/img/group-avatar.svg'" core-external-content role="presentation" [siteId]="siteId">
                 <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false"
-                    [checkOnline]="otherMember.showonlinestatus">
-                </core-user-avatar>
-                <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                    [checkOnline]="otherMember.showonlinestatus" />
+                <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0" />
                 <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
-                    [attr.aria-label]="'core.favourites' | translate">
-                </ion-icon>
+                    [attr.aria-label]="'core.favourites' | translate" />
                 <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
-                    [attr.aria-label]="'addon.messages.mutedconversation' | translate">
-                </ion-icon>
+                    [attr.aria-label]="'addon.messages.mutedconversation' | translate" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
     <core-navbar-buttons slot="end">
         <core-context-menu [attr.aria-label]="'addon.messages.conversationactions' | translate">
             <core-context-menu-item [hidden]="isSelf || !showInfo || isGroup" [priority]="1000"
-                [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="fas-circle-info"></core-context-menu-item>
+                [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="fas-circle-info" />
             <core-context-menu-item [hidden]="isSelf || !showInfo || !isGroup" [priority]="1000"
-                [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="fas-circle-info">
-            </core-context-menu-item>
+                [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="fas-circle-info" />
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" (action)="changeFavourite($event)"
                 [closeOnClick]="false" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' :
-                'addon.messages.addtofavourites') | translate" [iconAction]="favouriteIcon" [iconSlash]="favouriteIconSlash">
-            </core-context-menu-item>
+                'addon.messages.addtofavourites') | translate" [iconAction]="favouriteIcon" [iconSlash]="favouriteIconSlash" />
             <core-context-menu-item [hidden]="isSelf || !otherMember || otherMember.isblocked" [priority]="700"
-                [content]="'addon.messages.blockuser' | translate" (action)="blockUser()" [iconAction]="blockIcon">
-            </core-context-menu-item>
+                [content]="'addon.messages.blockuser' | translate" (action)="blockUser()" [iconAction]="blockIcon" />
             <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.isblocked" [priority]="700"
-                [content]="'addon.messages.unblockuser' | translate" (action)="unblockUser()" [iconAction]="blockIcon">
-            </core-context-menu-item>
+                [content]="'addon.messages.unblockuser' | translate" (action)="unblockUser()" [iconAction]="blockIcon" />
             <core-context-menu-item [hidden]="isSelf || !muteEnabled || !conversation" [priority]="600" (action)="changeMute($event)"
                 [closeOnClick]="false" [content]="(conversation && conversation.ismuted ? 'addon.messages.unmuteconversation' :
-                'addon.messages.muteconversation') | translate" [iconAction]="muteIcon"></core-context-menu-item>
+                'addon.messages.muteconversation') | translate" [iconAction]="muteIcon" />
             <core-context-menu-item [hidden]="!canDelete || !messages || !messages.length" [priority]="400"
-                [content]="'addon.messages.showdeletemessages' | translate" iconAction="toggle" [(toggle)]="showDelete">
-            </core-context-menu-item>
+                [content]="'addon.messages.showdeletemessages' | translate" iconAction="toggle" [(toggle)]="showDelete" />
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversationId || isGroup || !messages || !messages.length"
                 [priority]="200" [content]="'addon.messages.deleteconversation' | translate" (action)="deleteConversation($event)"
-                [closeOnClick]="false" [iconAction]="deleteIcon"></core-context-menu-item>
+                [closeOnClick]="false" [iconAction]="deleteIcon" />
             <core-context-menu-item
                 [hidden]="isSelf || !otherMember || otherMember.iscontact || requestContactSent || requestContactReceived" [priority]="100"
-                [content]="'addon.messages.addtoyourcontacts' | translate" (action)="createContactRequest()" [iconAction]="addRemoveIcon">
-            </core-context-menu-item>
+                [content]="'addon.messages.addtoyourcontacts' | translate" (action)="createContactRequest()" [iconAction]="addRemoveIcon" />
             <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.iscontact" [priority]="100"
                 [content]="'addon.messages.removefromyourcontacts' | translate" (action)="removeContact()" [iconAction]="addRemoveIcon"
-                [iconSlash]="true"></core-context-menu-item>
+                [iconSlash]="true" />
         </core-context-menu>
     </core-navbar-buttons>
 </ion-header>
 <ion-content (ionScroll)="scrollFunction()">
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError">
-        </core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError" />
 
         <ng-container *ngIf="isSelf && !canLoadMore">
             <p class="ion-text-center">{{ 'addon.messages.selfconversation' | translate }}</p>
@@ -78,25 +68,23 @@
 
                 <ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom > 0 && message.id === unreadMessageFrom" color="light">
                     <ion-label>{{ 'addon.messages.newmessages' | translate }}</ion-label>
-                    <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-arrow-down" aria-hidden="true" />
                 </ion-chip>
 
                 <core-message [message]="message" [user]="members[message.useridfrom]" (afterRender)="last && scrollToBottom()"
                     [text]="message.text" (onDeleteMessage)="deleteMessage(message, index)" [showDelete]="showDelete"
-                    [time]="message.timecreated">
-                </core-message>
+                    [time]="message.timecreated" />
             </ng-container>
         </ion-list>
 
         <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments"
-            [message]="'addon.messages.nomessagesfound' | translate">
-        </core-empty-box>
+            [message]="'addon.messages.nomessagesfound' | translate" />
     </core-loading>
     <!-- Scroll bottom. -->
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && newMessages > 0">
         <ion-fab-button size="small" (click)="scrollToFirstUnreadMessage()" color="light"
             [attr.aria-label]="'addon.messages.newmessages' | translate">
-            <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-arrow-down" aria-hidden="true" />
             <span class="sr-only">{{ 'addon.messages.newmessages' | translate }}</span>
         </ion-fab-button>
         <ion-badge class="core-discussion-messages-badge">{{ newMessages }}</ion-badge>
@@ -138,6 +126,6 @@
             </p>
         </div>
         <core-send-message-form *ngIf="footerType === 'message'" (onSubmit)="sendMessage($event)" [showKeyboard]="showKeyboard"
-            [placeholder]="'addon.messages.newmessage' | translate"></core-send-message-form>
+            [placeholder]="'addon.messages.newmessage' | translate" />
     </ion-toolbar>
 </ion-footer>
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index a778f18f2..8995fb3cd 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -1,27 +1,27 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.messages' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
-            <core-context-menu></core-context-menu>
-            <core-user-menu-button></core-user-menu-button>
+            <core-context-menu />
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
         <core-search-box (onSubmit)="searchMessage($event)" (onClear)="clearSearch()" [placeholder]=" 'addon.messages.message' | translate"
             autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesDiscussions"
-            [autoFocus]="false"></core-search-box>
+            [autoFocus]="false" />
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
 
@@ -29,7 +29,7 @@
 
                 <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()"
                     [attr.aria-label]="'addon.messages.contacts' | translate" [detail]="true" button>
-                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
                     <ion-label>
                         <p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
                     </ion-label>
@@ -47,12 +47,12 @@
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let result of search.results" button
                         [attr.aria-label]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)"
                         [attr.aria-current]="result.userid === discussionUserId ? 'page' : 'false'" [detail]="false">
-                        <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
+                        <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus" />
                         <ion-label>
                             <p class="item-heading">{{ result.fullname }}</p>
                             <p>
                                 <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" contextLevel="system"
-                                    [contextInstanceId]="0"></core-format-text>
+                                    [contextInstanceId]="0" />
                             </p>
                         </ion-label>
                     </ion-item>
@@ -61,7 +61,7 @@
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                         [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
                         [attr.aria-current]="discussion.message!.user === discussionUserId ? 'page' : 'false'" [detail]="false">
-                        <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
+                        <core-user-avatar [user]="discussion" slot="start" checkOnline="false" />
                         <ion-label>
                             <div class="flex-row ion-justify-content-between">
                                 <p class="item-heading">{{ discussion.fullname }}</p>
@@ -69,8 +69,7 @@
                                     <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
                                         {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
                                     </span>
-                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
-                                    </ion-icon>
+                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true" />
                                     <span *ngIf="discussion.unread" class="sr-only">
                                         {{ 'addon.messages.unreadmessages' | translate }}
                                     </span>
@@ -78,8 +77,7 @@
                             </div>
                             <p>
                                 <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message" contextLevel="system"
-                                    [contextInstanceId]="0">
-                                </core-format-text>
+                                    [contextInstanceId]="0" />
                             </p>
                         </ion-label>
                     </ion-item>
@@ -87,10 +85,10 @@
             </ion-list>
 
             <core-empty-box *ngIf="(!discussions || discussions.length <= 0) && !search.showResults" icon="far-comments"
-                [message]="'addon.messages.nomessagesfound' | translate"></core-empty-box>
+                [message]="'addon.messages.nomessagesfound' | translate" />
 
             <core-empty-box *ngIf="(!search.results || search.results.length <= 0) && search.showResults" icon="fas-magnifying-glass"
-                [message]="'core.noresults' | translate"></core-empty-box>
+                [message]="'core.noresults' | translate" />
         </core-loading>
     </core-split-view>
 </ion-content>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 7a9af7157..de0dd6db5 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -1,34 +1,34 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.messages' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
-                <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-button (click)="gotoSettings()" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
-                <ion-icon name="fas-gear" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-gear" 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></core-context-menu>
-            <core-user-menu-button></core-user-menu-button>
+            <core-context-menu />
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
             <ion-list>
                 <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" [detail]="true" button>
-                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
                     <ion-label>
                         <h2>{{ 'addon.messages.contacts' | translate }}</h2>
                     </ion-label>
@@ -43,8 +43,7 @@
                     [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
                     [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                        [class.expandable-status-icon-expanded]="favourites.expanded">
-                    </ion-icon>
+                        [class.expandable-status-icon-expanded]="favourites.expanded" />
                     <ion-label>
                         <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
                     </ion-label>
@@ -55,11 +54,10 @@
                 </ion-item>
                 <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist
                     id="addon-messages-groupconversations-favourite">
-                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}">
-                    </ng-container>
+                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}" />
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                     <core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)"
-                        [error]="favourites.loadMoreError"></core-infinite-loading>
+                        [error]="favourites.loadMoreError" />
                     <ion-item class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length === 0">
                         <ion-label>
                             <p>{{ 'addon.messages.nofavourites' | translate }}</p>
@@ -68,7 +66,7 @@
                 </div>
                 <ion-item class="ion-text-center" *ngIf="favourites.loading">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
 
@@ -77,8 +75,7 @@
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
                     aria-controls="addon-messages-groupconversations-group" role="heading" [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                        [class.expandable-status-icon-expanded]="group.expanded">
-                    </ion-icon>
+                        [class.expandable-status-icon-expanded]="group.expanded" />
                     <ion-label>
                         <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
                     </ion-label>
@@ -89,11 +86,10 @@
                 </ion-item>
                 <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist
                     id="addon-messages-groupconversations-group">
-                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}">
-                    </ng-container>
+                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}" />
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                     <core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)"
-                        [error]="group.loadMoreError"></core-infinite-loading>
+                        [error]="group.loadMoreError" />
                     <ion-item class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length === 0">
                         <ion-label>
                             <p>{{ 'addon.messages.nogroupconversations' | translate }}</p>
@@ -102,7 +98,7 @@
                 </div>
                 <ion-item class="ion-text-center" *ngIf="group.loading">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
 
@@ -111,8 +107,7 @@
                     [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
                     [detail]="false">
                     <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                        [class.expandable-status-icon-expanded]="individual.expanded">
-                    </ion-icon>
+                        [class.expandable-status-icon-expanded]="individual.expanded" />
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
@@ -123,11 +118,10 @@
                 </ion-item>
                 <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist
                     id="addon-messages-groupconversations-individual">
-                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}">
-                    </ng-container>
+                    <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}" />
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                     <core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)"
-                        [error]="individual.loadMoreError"></core-infinite-loading>
+                        [error]="individual.loadMoreError" />
                     <ion-item class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length === 0">
                         <ion-label>
                             <p>{{ 'addon.messages.noindividualconversations' | translate }}</p>
@@ -136,7 +130,7 @@
                 </div>
                 <ion-item class="ion-text-center" *ngIf="individual.loading">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
 
@@ -148,9 +142,9 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button [detail]="false"
+        [attr.aria-current]="((conversation.id && conversation.id === selectedConversationId) ||
+            (conversation.userid && conversation.userid === selectedUserId)) ? 'page': 'false'"
         (click)="gotoConversation(conversation.id, conversation.userid)"
-        [attr.aria-current]="((conversation.id &&
-            conversation.id === selectedConversationId) || (conversation.userid && conversation.userid === selectedUserId)) ? 'page': 'false'"
         id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}"
         [attr.aria-label]="conversation.name">
         <!-- Group conversation image. -->
@@ -161,16 +155,15 @@
 
         <!-- Avatar for individual conversations. -->
         <core-user-avatar *ngIf="conversation.type !== typeGroup" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false"
-            [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
+            [checkOnline]="conversation.showonlinestatus" slot="start" />
 
         <ion-label>
             <div class="flex-row ion-justify-content-between">
                 <p class="item-heading">
-                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" [title]="'addon.messages.contactblocked' | translate">
-                    </ion-icon>
-                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark" [title]="'addon.messages.mutedconversation' | translate">
-                    </ion-icon>
+                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
+                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" [title]="'addon.messages.contactblocked' | translate" />
+                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark"
+                        [title]="'addon.messages.mutedconversation' | translate" />
                 </p>
                 <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
                     <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
@@ -183,7 +176,7 @@
                 </ion-note>
             </div>
             <p *ngIf="conversation.subname">
-                <core-format-text [text]="conversation.subname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                <core-format-text [text]="conversation.subname" contextLevel="system" [contextInstanceId]="0" />
             </p>
             <p *ngIf="conversation.lastmessage !== undefined" class="addon-message-last-message">
                 <span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">
@@ -192,7 +185,7 @@
                 <span *ngIf="!conversation.sentfromcurrentuser && conversation.type === typeGroup && conversation.members[0]"
                     class="addon-message-last-message-user">{{ conversation.members[0].fullname + ':' }}</span>
                 <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"
-                    contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                    contextLevel="system" [contextInstanceId]="0" />
             </p>
         </ion-label>
     </ion-item>
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index 933c0b2bb..60fa3c1ca 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -1,35 +1,34 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.searchcombined' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
-            <core-context-menu></core-context-menu>
+            <core-context-menu />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [disabled]="disableSearch" autocorrect="off"
-            [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1" searchArea="AddonMessagesSearch"></core-search-box>
+            [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1" searchArea="AddonMessagesSearch" />
 
         <core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
             <ion-list *ngIf="displayResults">
-                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>
-                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}"></ng-container>
-                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}"></ng-container>
+                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}" />
+                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}" />
+                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}" />
                 <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                 <core-infinite-loading [enabled]="messages.canLoadMore" (action)="search(query, 'messages', $event)"
-                    [error]="messages.loadMoreError"></core-infinite-loading>
+                    [error]="messages.loadMoreError" />
             </ion-list>
 
             <core-empty-box *ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length"
-                icon="fas-magnifying-glass" [message]="'core.noresults' | translate">
-            </core-empty-box>
+                icon="fas-magnifying-glass" [message]="'core.noresults' | translate" />
         </core-loading>
     </core-split-view>
 </ion-content>
@@ -46,13 +45,11 @@
         <!-- List of results -->
         <ion-item class="addon-message-discussion ion-text-wrap" *ngFor="let result of item.results" [attr.aria-label]="result.fullname"
             (click)="openConversation(result)" [attr.aria-current]="result === selectedResult ? 'page' : 'false'" [detail]="true" button>
-            <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false" />
             <ion-label>
                 <p class="item-heading">
-                    <core-format-text [text]="result.fullname" [highlight]="result.highlightName" [filter]="false">
-                    </core-format-text>
-                    <ion-icon name="fas-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate">
-                    </ion-icon>
+                    <core-format-text [text]="result.fullname" [highlight]="result.highlightName" [filter]="false" />
+                    <ion-icon name="fas-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                 </p>
                 <ion-note *ngIf="result.lastmessagedate > 0">
                     {{result.lastmessagedate | coreDateDayOrTime}}
@@ -62,7 +59,7 @@
                         {{ 'addon.messages.you' | translate }}
                     </span>
                     <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" [highlight]="result.highlightMessage"
-                        contextLevel="system" [contextInstanceId]="0" class="addon-message-last-message-text"></core-format-text>
+                        contextLevel="system" [contextInstanceId]="0" class="addon-message-last-message-text" />
                 </p>
             </ion-label>
         </ion-item>
@@ -75,7 +72,7 @@
                 </ion-button>
             </div>
             <div *ngIf="item.loadingMore" class="ion-padding ion-text-center">
-                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate" />
             </div>
         </ng-container>
     </ng-container>
diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index fe58ac796..c5c8a9c40 100644
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.messages.messages' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="preferencesLoaded">
         <!-- General settings. -->
@@ -25,7 +25,7 @@
                     <ion-label>
                         <p>{{ 'addon.messages.useentertosend' | translate }}</p>
                     </ion-label>
-                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
+                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end" />
                 </ion-item>
             </ion-list>
         </ion-card>
@@ -36,8 +36,7 @@
                 <ion-label class="ion-text-wrap">
                     <p>{{ 'addon.messages.blocknoncontacts' | translate }}</p>
                 </ion-label>
-                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end">
-                </ion-toggle>
+                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end" />
             </ion-item>
 
             <ion-list *ngIf="advancedContactable">
@@ -51,19 +50,19 @@
                         <ion-label>
                             <p>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="start" [value]="onlyContactsValue"></ion-radio>
+                        <ion-radio slot="start" [value]="onlyContactsValue" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <p>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="start" [value]="courseMemberValue"></ion-radio>
+                        <ion-radio slot="start" [value]="courseMemberValue" />
                     </ion-item>
                     <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
                         <ion-label>
                             <p>{{ 'addon.messages.contactableprivacy_site' | translate }}</p>
                         </ion-label>
-                        <ion-radio slot="start" [value]="siteValue"></ion-radio>
+                        <ion-radio slot="start" [value]="siteValue" />
                     </ion-item>
                 </ion-radio-group>
             </ion-list>
@@ -72,10 +71,10 @@
         <!-- Notifications. -->
         <ng-container *ngIf="preferences">
             <ng-container *ngIf="!groupMessagingEnabled">
-                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
+                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
             </ng-container>
             <ng-container *ngIf="groupMessagingEnabled">
-                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
+                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
             </ng-container>
         </ng-container>
     </core-loading>
@@ -109,8 +108,7 @@
                             <!-- If notifications enabled, show toggle. -->
                             <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification['updating'+state]" slot="end">
                                 <ion-toggle [(ngModel)]="processor[state].checked"
-                                    (ngModelChange)="changePreferenceLegacy(notification, processor, state)">
-                                </ion-toggle>
+                                    (ngModelChange)="changePreferenceLegacy(notification, processor, state)" />
                             </core-button-with-spinner>
                             <span *ngIf="processor.locked && processor[state].checked" class="text-gray" slot="end">
                                 {{'core.settings.forced' | translate }}
@@ -145,8 +143,7 @@
                     <ng-container *ngIf="!preferences.disableall">
                         <!-- If notifications enabled, show toggle. -->
                         <core-button-with-spinner *ngIf="!processor.locked" [loading]="notification.updating" slot="end">
-                            <ion-toggle [(ngModel)]="processor.enabled" (ngModelChange)="changePreference(notification, processor)">
-                            </ion-toggle>
+                            <ion-toggle [(ngModel)]="processor.enabled" (ngModelChange)="changePreference(notification, processor)" />
                         </core-button-with-spinner>
                         <span class="text-gray" *ngIf="processor.locked" slot="end">
                             {{ processor.lockedmessage }}
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
index 38aa16a83..174c766bd 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
@@ -5,15 +5,14 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <form name="addon-mod_assign-edit-feedback-form" *ngIf="userId && plugin" #editFeedbackForm>
-        <addon-mod-assign-feedback-plugin [assign]="assign" [submission]="submission" [userId]="userId" [plugin]="plugin" [edit]="true">
-        </addon-mod-assign-feedback-plugin>
+        <addon-mod-assign-feedback-plugin [assign]="assign" [submission]="submission" [userId]="userId" [plugin]="plugin" [edit]="true" />
         <ion-button expand="block" (click)="done($event)">{{ 'core.done' | translate }}</ion-button>
     </form>
 </ion-content>
diff --git a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
index 3a61b78e2..81d2f09e0 100644
--- a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
+++ b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
@@ -9,12 +9,10 @@
                 </ion-badge>
                 <p *ngIf="text">
                     <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
-                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course" />
                 </p>
                 <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
-                    [alwaysDownload]="true">
-                </core-file>
+                    [alwaysDownload]="true" />
             </ion-label>
         </ion-item>
     </core-loading>
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 3f65bb593..cef082331 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -12,8 +12,7 @@
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
         [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
         <div description *ngIf="assign && assign.introattachments?.length && !assign.submissionattachments">
-            <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId">
-            </core-file>
+            <core-file *ngFor="let file of assign.introattachments" [file]="file" [component]="component" [componentId]="componentId" />
         </div>
     </core-course-module-info>
 
@@ -21,8 +20,7 @@
     <ng-container *ngIf="assign && canViewAllSubmissions">
         <ion-list class="core-list-align-detail-right">
 
-            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId">
-            </core-group-selector>
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId" />
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
@@ -115,19 +113,17 @@
         <!-- Ungrouped users. -->
         <ion-card *ngIf="assign.teamsubmission && summary && summary.warnofungroupedusers" class="core-info-card">
             <ion-item>
-                <ion-icon name="fas-circle-question" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_assign.'+summary.warnofungroupedusers | translate }}</ion-label>
             </ion-item>
         </ion-card>
 
         <div collapsible-footer *ngIf="!showLoading" slot="fixed">
-            <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-            </core-course-module-navigation>
+            <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
         </div>
     </ng-container>
 
     <!-- If it's a student, display his submission. -->
     <addon-mod-assign-submission *ngIf="!showLoading && !canViewAllSubmissions && canViewOwnSubmission" [courseId]="courseId"
-        [moduleId]="module.id">
-    </addon-mod-assign-submission>
+        [moduleId]="module.id" />
 </core-loading>
diff --git a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
index 29818a878..389c7ed53 100644
--- a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
+++ b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
@@ -9,12 +9,10 @@
                 </ion-badge>
                 <p *ngIf="text">
                     <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
-                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course" />
                 </p>
                 <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
-                    [alwaysDownload]="true">
-                </core-file>
+                    [alwaysDownload]="true" />
             </ion-label>
         </ion-item>
     </core-loading>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index fc5a16654..a0f9a4e70 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -3,7 +3,7 @@
         <!-- Time limit is over. -->
         <ion-card *ngIf="timeLimitFinished && (canEdit || canSubmit)" class="core-danger-card">
             <ion-item class="ion-text-wrap">
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p>{{ 'addon.mod_assign.caneditsubmission' | translate }}</p>
                 </ion-label>
@@ -13,10 +13,10 @@
         <!-- User and status of the submission. -->
         <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
             [attr.aria-label]="user!.fullname">
-            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar [user]="user" slot="start" [linkProfile]="false" />
             <ion-label>
                 <p class="item-heading">{{ user!.fullname }}</p>
-                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+                <ng-container *ngTemplateOutlet="submissionStatus" />
             </ion-label>
         </ion-item>
 
@@ -24,7 +24,7 @@
         <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</p>
-                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+                <ng-container *ngTemplateOutlet="submissionStatus" />
             </ion-label>
         </ion-item>
 
@@ -32,7 +32,7 @@
         <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_assign.submissionstatus' | translate }}</p>
-                <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
+                <ng-container *ngTemplateOutlet="submissionStatus" />
             </ion-label>
         </ion-item>
 
@@ -103,8 +103,7 @@
                             <p class="item-heading">{{ 'addon.mod_assign.timeremaining' | translate }}</p>
                             <p *ngIf="!timeLimitEndTime" [innerHTML]="timeRemaining"></p>
                             <core-timer *ngIf="timeLimitEndTime > 0" [endTime]="timeLimitEndTime" mode="basic" timeUpText="00:00:00"
-                                [timeLeftClassThreshold]="-1" [underTimeClassThresholds]="[300, 900]" (finished)="timeUp()">
-                            </core-timer>
+                                [timeLeftClassThreshold]="-1" [underTimeClassThresholds]="[300, 900]" (finished)="timeUp()" />
                         </ion-label>
                     </ion-item>
 
@@ -136,8 +135,7 @@
                     </ion-item>
 
                     <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign"
-                        [submission]="userSubmission" [plugin]="plugin">
-                    </addon-mod-assign-submission-plugin>
+                        [submission]="userSubmission" [plugin]="plugin" />
 
                     <!-- Team members that need to submit it too. -->
                     <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
@@ -149,7 +147,7 @@
                         <ng-container *ngFor="let user of membersToSubmit">
                             <ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
                                 [attr.aria-label]="user.fullname">
-                                <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+                                <core-user-avatar [user]="user" slot="start" [linkProfile]="false" />
                                 <ion-label>
                                     <p class="item-heading">{{ user.fullname }}</p>
                                 </ion-label>
@@ -213,7 +211,7 @@
                                             <ion-button expand="block" *ngIf="submissionUrl" [href]="submissionUrl" core-link
                                                 [showBrowserWarning]="false">
                                                 {{ 'core.openinbrowser' | translate }}
-                                                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                                                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                                             </ion-button>
 
                                         </ng-container>
@@ -229,10 +227,9 @@
                             <ng-container *ngIf="canSubmit">
                                 <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
                                     <ion-label>
-                                        <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
+                                        <core-format-text [text]="submissionStatement" [filter]="false" />
                                     </ion-label>
-                                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
-                                    </ion-checkbox>
+                                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement" />
                                 </ion-item>
                                 <!-- Submit button. -->
                                 <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
@@ -253,8 +250,7 @@
                                 </ion-item>
                             </ng-container>
                         </div>
-                        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="moduleId">
-                        </core-course-module-navigation>
+                        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="moduleId" />
                     </div>
                 </ng-template>
             </core-tab>
@@ -268,12 +264,12 @@
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_assign.currentgrade' | translate }}</p>
                             <p>
-                                <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
+                                <core-format-text [text]="feedback!.gradefordisplay" [filter]="false" />
                             </p>
                         </ion-label>
                         <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
                             [attr.aria-label]="'core.showadvanced' |translate">
-                            <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-item>
 
@@ -285,8 +281,7 @@
                                 <p class="item-heading">{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</p>
                             </ion-label>
                             <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
-                                [lang]="grade.lang">
-                            </ion-input>
+                                [lang]="grade.lang" />
                             <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
                         </ion-item>
 
@@ -345,8 +340,7 @@
 
                     <ng-container *ngIf="feedback">
                         <addon-mod-assign-feedback-plugin *ngFor="let plugin of feedback.plugins" [assign]="assign"
-                            [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades">
-                        </addon-mod-assign-feedback-plugin>
+                            [submission]="userSubmission" [userId]="submitId" [plugin]="plugin" [canEdit]="canSaveGrades" />
                     </ng-container>
 
                     <!-- Workflow status. -->
@@ -363,7 +357,7 @@
                             <p class="item-heading">{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</p>
                             <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
                         </ion-label>
-                        <ion-toggle [(ngModel)]="grade.applyToAll" slot="end"></ion-toggle>
+                        <ion-toggle [(ngModel)]="grade.applyToAll" slot="end" />
                     </ion-item>
 
                     <!-- Attempt status. -->
@@ -387,14 +381,14 @@
                         </ion-item>
                         <ion-item *ngIf="canSaveGrades && allowAddAttempt">
                             <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
-                            <ion-toggle [(ngModel)]="grade.addAttempt" slot="end"></ion-toggle>
+                            <ion-toggle [(ngModel)]="grade.addAttempt" slot="end" />
                         </ion-item>
                     </ng-container>
 
                     <!-- Data about the grader (teacher who graded). -->
                     <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
                         [attr.aria-label]="grader!.fullname" [detail]="true">
-                        <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
+                        <core-user-avatar [user]="grader" slot="start" [linkProfile]="false" />
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_assign.gradedby' | translate }}</p>
                             <p class="item-heading">{{ grader!.fullname }}</p>
@@ -413,12 +407,12 @@
                     <!-- Warning message if cannot save grades. -->
                     <ion-card *ngIf="isGrading && !canSaveGrades" class="core-warning-card">
                         <ion-item>
-                            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                             <ion-label>
                                 <p>{{ 'addon.mod_assign.cannotgradefromapp' | translate }}</p>
                                 <ion-button expand="block" *ngIf="gradeUrl" [href]="gradeUrl" core-link [showBrowserWarning]="false">
                                     {{ 'core.openinbrowser' | translate }}
-                                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                                 </ion-button>
                             </ion-label>
                         </ion-item>
@@ -434,8 +428,7 @@
     <ng-container *ngIf="assign && assign!.teamsubmission && lastAttempt">
         <p *ngIf="lastAttempt.submissiongroup && lastAttempt.submissiongroupname" class="core-groupname">
             <core-format-text [text]="lastAttempt.submissiongroupname" contextLevel="course" [contextInstanceId]="courseId"
-                [wsNotFiltered]="true">
-            </core-format-text>
+                [wsNotFiltered]="true" />
         </p>
         <ng-container *ngIf="assign!.preventsubmissionnotingroup &&
             !lastAttempt!.submissiongroup &&
diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
index e30f369a0..6ad516896 100644
--- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
+++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
@@ -4,18 +4,17 @@
         <h2>{{ plugin.name }}</h2>
         <p>
             <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
-                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
-            </core-format-text>
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course" />
         </p>
     </ion-label>
     <div slot="end">
         <div class="ion-text-end">
             <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" [attr.aria-label]="'core.edit' | translate">
-                <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </div>
         <ion-note *ngIf="!isSent" color="dark">
-            <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
+            <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'core.notsent' | translate }}
         </ion-note>
     </div>
 </ion-item>
@@ -25,6 +24,5 @@
     <ion-label class="sr-only">{{ plugin.name }}</ion-label>
     <core-rich-text-editor [control]="control" [placeholder]="plugin.name" name="assignfeedbackcomments_editor" [component]="component"
         [componentId]="assign.cmid" [autoSave]="true" contextLevel="module" [contextInstanceId]="assign.cmid"
-        elementId="assignfeedbackcomments_editor" [draftExtraParams]="{userid: userId, action: 'grade'}">
-    </core-rich-text-editor>
+        elementId="assignfeedbackcomments_editor" [draftExtraParams]="{userid: userId, action: 'grade'}" />
 </ion-item>
diff --git a/src/addons/mod/assign/feedback/editpdf/component/addon-mod-assign-feedback-editpdf.html b/src/addons/mod/assign/feedback/editpdf/component/addon-mod-assign-feedback-editpdf.html
index d50b9ae85..e3facd7a1 100644
--- a/src/addons/mod/assign/feedback/editpdf/component/addon-mod-assign-feedback-editpdf.html
+++ b/src/addons/mod/assign/feedback/editpdf/component/addon-mod-assign-feedback-editpdf.html
@@ -3,8 +3,8 @@
     <ion-label>
         <h2>{{plugin.name}}</h2>
         <ng-container>
-            <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true">
-            </core-file>
+            <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
+                [alwaysDownload]="true" />
         </ng-container>
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/assign/feedback/file/component/addon-mod-assign-feedback-file.html b/src/addons/mod/assign/feedback/file/component/addon-mod-assign-feedback-file.html
index d50b9ae85..e3facd7a1 100644
--- a/src/addons/mod/assign/feedback/file/component/addon-mod-assign-feedback-file.html
+++ b/src/addons/mod/assign/feedback/file/component/addon-mod-assign-feedback-file.html
@@ -3,8 +3,8 @@
     <ion-label>
         <h2>{{plugin.name}}</h2>
         <ng-container>
-            <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true">
-            </core-file>
+            <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="assign.cmid"
+                [alwaysDownload]="true" />
         </ng-container>
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/assign/pages/edit/edit.html b/src/addons/mod/assign/pages/edit/edit.html
index 9b1cecbaa..a05415641 100644
--- a/src/addons/mod/assign/pages/edit/edit.html
+++ b/src/addons/mod/assign/pages/edit/edit.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
@@ -22,38 +21,33 @@
             <!-- @todo plagiarism_print_disclosure -->
             <core-timer *ngIf="timeLimitEndTime > 0" [endTime]="timeLimitEndTime" (finished)="timeUp()" timeUpText="00:00:00"
                 [timerText]="'addon.mod_assign.assigntimeleft' | translate" [align]="'center'" [timeLeftClassThreshold]="-1"
-                [underTimeClassThresholds]="[300, 900]">
-            </core-timer>
+                [underTimeClassThresholds]="[300, 900]" />
 
             <!-- Assign activity instructions and attachments if needed. -->
             <ion-item class="ion-text-wrap" *ngIf="activityInstructions">
                 <ion-label>
                     <core-format-text [text]="activityInstructions" [component]="component" [componentId]="moduleId" contextLevel="module"
-                        [contextInstanceId]="moduleId" [courseId]="courseId">
-                    </core-format-text>
+                        [contextInstanceId]="moduleId" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
 
             <ng-container *ngIf="assign?.submissionattachments">
-                <core-file *ngFor="let file of introAttachments" [file]="file" [component]="component" [componentId]="moduleId">
-                </core-file>
+                <core-file *ngFor="let file of introAttachments" [file]="file" [component]="component" [componentId]="moduleId" />
             </ng-container>
 
             <form name="addon-mod_assign-edit-form" #editSubmissionForm>
                 <!-- Submission statement. -->
                 <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
                     <ion-label>
-                        <core-format-text [text]="submissionStatement" [filter]="false">
-                        </core-format-text>
+                        <core-format-text [text]="submissionStatement" [filter]="false" />
                     </ion-label>
-                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="submissionStatementAccepted"></ion-checkbox>
+                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="submissionStatementAccepted" />
                     <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
                     <input type="hidden" [ngModel]="submissionStatementAccepted" name="submissionstatement">
                 </ion-item>
 
                 <addon-mod-assign-submission-plugin *ngFor="let plugin of userSubmission.plugins" [assign]="assign"
-                    [submission]="userSubmission" [plugin]="plugin" [edit]="true" [allowOffline]="allowOffline">
-                </addon-mod-assign-submission-plugin>
+                    [submission]="userSubmission" [plugin]="plugin" [edit]="true" [allowOffline]="allowOffline" />
             </form>
         </ion-list>
     </core-loading>
diff --git a/src/addons/mod/assign/pages/index/index.html b/src/addons/mod/assign/pages/index/index.html
index 0ee3bc5a8..4bcdb2e52 100644
--- a/src/addons/mod/assign/pages/index/index.html
+++ b/src/addons/mod/assign/pages/index/index.html
@@ -1,24 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-assign-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-assign-index>
+    <addon-mod-assign-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/assign/pages/submission-list/submission-list.html b/src/addons/mod/assign/pages/submission-list/submission-list.html
index dfc608421..2dc9b43e2 100644
--- a/src/addons/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addons/mod/assign/pages/submission-list/submission-list.html
@@ -1,35 +1,33 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!submissions.loaded" (ionRefresh)="refreshList($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="submissions.loaded">
             <ion-list>
                 <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSubmissions()"
-                    [courseId]="courseId">
-                </core-group-selector>
+                    [courseId]="courseId" />
 
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions.items">
                     <ion-item class="ion-text-wrap" (click)="submissions.select(submission)" button
                         [attr.aria-current]="submissions.getItemAriaCurrent(submission)" [detail]="true">
-                        <core-user-avatar [user]="submission" [linkProfile]="false" slot="start"></core-user-avatar>
+                        <core-user-avatar [user]="submission" [linkProfile]="false" slot="start" />
                         <ion-label>
                             <p class="item-heading" *ngIf="submission.userfullname">{{submission.userfullname}}</p>
                             <p class="item-heading" *ngIf="!submission.userfullname">
@@ -37,8 +35,7 @@
                             </p>
                             <p *ngIf="assign && assign!.teamsubmission">
                                 <span *ngIf="submission.groupname" class="core-groupname">
-                                    <core-format-text [text]="submission.groupname" contextLevel="course" [contextInstanceId]="courseId">
-                                    </core-format-text>
+                                    <core-format-text [text]="submission.groupname" contextLevel="course" [contextInstanceId]="courseId" />
                                 </span>
                                 <span *ngIf="assign!.preventsubmissionnotingroup && !submission.groupname && submission.noGroups
                                     && !submission.blindid" class="text-danger">
@@ -68,8 +65,7 @@
             </ion-list>
 
             <core-empty-box *ngIf="!submissions || submissions.empty" icon="fas-file-signature"
-                [message]="'addon.mod_assign.submissionstatus_' | translate">
-            </core-empty-box>
+                [message]="'addon.mod_assign.submissionstatus_' | translate" />
         </core-loading>
     </core-split-view>
 </ion-content>
diff --git a/src/addons/mod/assign/pages/submission-review/submission-review.html b/src/addons/mod/assign/pages/submission-review/submission-review.html
index 370086cb0..fe477e715 100644
--- a/src/addons/mod/assign/pages/submission-review/submission-review.html
+++ b/src/addons/mod/assign/pages/submission-review/submission-review.html
@@ -1,16 +1,15 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 
     <core-navbar-buttons slot="end">
@@ -21,10 +20,9 @@
 </ion-header>
 <ion-content [core-swipe-navigation]="submissions">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshSubmission($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <addon-mod-assign-submission *ngIf="loaded" [courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId">
-        </addon-mod-assign-submission>
+        <addon-mod-assign-submission *ngIf="loaded" [courseId]="courseId" [moduleId]="moduleId" [submitId]="submitId" [blindId]="blindId" />
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html b/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
index 912151506..aeb861c11 100644
--- a/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
+++ b/src/addons/mod/assign/submission/comments/component/addon-mod-assign-submission-comments.html
@@ -2,7 +2,6 @@
     <ion-label>
         <h2>{{plugin.name}}</h2>
         <core-comments contextLevel="module" [instanceId]="assign.cmid" component="assignsubmission_comments" [itemId]="submission.id"
-            area="submission_comments" [title]="plugin.name" [courseId]="assign.course">
-        </core-comments>
+            area="submission_comments" [title]="plugin.name" [courseId]="assign.course" />
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
index 9dff2e4d5..5e4e45293 100644
--- a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
+++ b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
@@ -3,7 +3,7 @@
     <ion-label>
         <h2>{{ plugin.name }}</h2>
         <div>
-            <core-files [files]="files" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true"></core-files>
+            <core-files [files]="files" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true" />
         </div>
     </ion-label>
 </ion-item>
@@ -16,6 +16,5 @@
         </ion-label>
     </ion-item-divider>
     <core-attachments [files]="files" [maxSize]="maxSize" [maxSubmissions]="maxSubmissions" [courseId]="assign.course"
-        [component]="component" [componentId]="assign.cmid" [acceptedTypes]="acceptedTypes" [allowOffline]="allowOffline">
-    </core-attachments>
+        [component]="component" [componentId]="assign.cmid" [acceptedTypes]="acceptedTypes" [allowOffline]="allowOffline" />
 </div>
diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index b417a1286..80ee10649 100644
--- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -5,8 +5,7 @@
         <p *ngIf="words">{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}</p>
         <p>
             <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
-                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
-            </core-format-text>
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course" />
         </p>
     </ion-label>
 </ion-item>
@@ -29,7 +28,6 @@
         <core-rich-text-editor [control]="control" [placeholder]="plugin.name" name="onlinetext_editor_text"
             (contentChanged)="onChange($event)" [component]="component" [componentId]="assign.cmid" [autoSave]="true" contextLevel="module"
             [contextInstanceId]="assign.cmid" elementId="onlinetext_editor"
-            [draftExtraParams]="{userid: currentUserId, action: 'editsubmission'}">
-        </core-rich-text-editor>
+            [draftExtraParams]="{userid: currentUserId, action: 'editsubmission'}" />
     </ion-item>
 </div>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index bb1d82c25..eb5ae623d 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -1,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,12 +10,10 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="groupChanged()"
-        [multipleGroupsMessage]="'addon.mod_bigbluebuttonbn.view_groups_selection_warning' | translate" [courseId]="module.course">
-    </core-group-selector>
+        [multipleGroupsMessage]="'addon.mod_bigbluebuttonbn.view_groups_selection_warning' | translate" [courseId]="module.course" />
 
     <ng-container *ngIf="meetingInfo && showRoom">
         <ion-item class="ion-text-wrap" *ngIf="meetingInfo.openingtime">
@@ -78,7 +76,7 @@
 
         <ion-card *ngIf="!meetingInfo.canjoin" class="core-warning-card">
             <ion-item class="ion-text-wrap">
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>{{ meetingInfo.statusmessage }}</ion-label>
             </ion-item>
         </ion-card>
@@ -94,8 +92,7 @@
             <ion-item button class="addon-mod_bbb-recording-title" [attr.aria-expanded]="recording.expanded" (click)="toggle(recording)"
                 [attr.aria-label]="(recording.expanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                    [class.expandable-status-icon-expanded]="recording.expanded">
-                </ion-icon>
+                    [class.expandable-status-icon-expanded]="recording.expanded" />
                 <ion-label>
                     <p>{{ recording.type }}</p>
                     <p>{{ recording.name }}</p>
@@ -113,7 +110,7 @@
                         <ion-label>
                             <p>{{ playback.name }}</p>
                         </ion-label>
-                        <ion-icon slot="end" [name]="playback.icon" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="end" [name]="playback.icon" aria-hidden="true" />
                     </ion-item>
                 </div>
                 <ion-item *ngFor="let data of recording.details" class="ion-text-wrap">
@@ -121,7 +118,7 @@
                         <p class="item-heading">{{ data.label }}</p>
                         <p *ngIf="data.allowHTML">
                             <core-format-text [text]="data.value" [component]="component" [componentId]="module.id" contextLevel="module"
-                                [contextInstanceId]="module.id" [courseId]="module.course"></core-format-text>
+                                [contextInstanceId]="module.id" [courseId]="module.course" />
                         </p>
                         <p *ngIf="!data.allowHTML">{{ data.value }}</p>
                     </ion-label>
@@ -130,8 +127,7 @@
         </ng-container>
 
         <core-empty-box *ngIf="recordings && !recordings.length" icon="far-file-video"
-            [message]="'addon.mod_bigbluebuttonbn.view_message_norecordings' | translate">
-        </core-empty-box>
+            [message]="'addon.mod_bigbluebuttonbn.view_message_norecordings' | translate" />
     </ng-container>
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
@@ -146,7 +142,6 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/bigbluebuttonbn/pages/index/index.html b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
index 506ef400b..538e267fe 100644
--- a/src/addons/mod/bigbluebuttonbn/pages/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/pages/index/index.html
@@ -1,23 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-bbb-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-bbb-index>
+    <addon-mod-bbb-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 704677aee..6f60eaf28 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,8 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <ion-list>
         <ion-item>
@@ -26,8 +25,7 @@
                 <p [class.ion-padding-start]="addPadding && chapter.level === 1 ? true : null">
                     <span *ngIf="showNumbers" class="addon-mod-book-number">{{chapter.indexNumber}} </span>
                     <span *ngIf="showBullets" class="addon-mod-book-bullet">&bull; </span>
-                    <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                    <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                 </p>
             </ion-label>
         </ion-item>
@@ -41,7 +39,6 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 64a99d665..e68109ac6 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -20,8 +20,8 @@
                     <p [class.ion-padding-start]="addPadding && chapter.level === 1 ? true : null" class="item-heading">
                         <span *ngIf="showNumbers" class="addon-mod-book-number">{{chapter.indexNumber}} </span>
                         <span *ngIf="showBullets" class="addon-mod-book-bullet">&bull; </span>
-                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                        </core-format-text>
+                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId"
+                            [courseId]="courseId" />
                     </p>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/mod/book/pages/contents/contents.html b/src/addons/mod/book/pages/contents/contents.html
index c776d1290..b1169bfeb 100644
--- a/src/addons/mod/book/pages/contents/contents.html
+++ b/src/addons/mod/book/pages/contents/contents.html
@@ -1,31 +1,30 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button (click)="showToc()" [attr.aria-label]="'addon.mod_book.toc' | translate" aria-haspopup="true" *ngIf="loaded">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
         <div class="safe-area-padding-horizontal core-swipe-slides-container">
             <ion-card class="core-warning-card" *ngIf="warning">
                 <ion-item>
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label><span [innerHTML]="warning"></span></ion-label>
                 </ion-item>
             </ion-card>
@@ -34,10 +33,10 @@
                 <ng-template let-chapter="item" let-active="active">
                     <div class="ion-padding">
                         <core-format-text [component]="component" [componentId]="cmId" [text]="chapter.content" contextLevel="module"
-                            [contextInstanceId]="cmId" [courseId]="courseId" [disabled]="!active"></core-format-text>
+                            [contextInstanceId]="cmId" [courseId]="courseId" [disabled]="!active" />
                         <div class="ion-margin-top" *ngIf="chapter.tags?.length > 0">
                             <strong>{{ 'core.tag.tags' | translate }}: </strong>
-                            <core-tag-list [tags]="chapter.tags"></core-tag-list>
+                            <core-tag-list [tags]="chapter.tags" />
                         </div>
                     </div>
                 </ng-template>
@@ -47,6 +46,5 @@
 
     <core-navigation-bar collapsible-footer appearOnBottom *ngIf="loaded && displayNavBar && navigationItems.length > 1"
         [items]="navigationItems" previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle"
-        (action)="changeChapter($event.id)" slot="fixed">
-    </core-navigation-bar>
+        (action)="changeChapter($event.id)" slot="fixed" />
 </ion-content>
diff --git a/src/addons/mod/book/pages/index/index.html b/src/addons/mod/book/pages/index/index.html
index 5b58f63cc..525f74785 100644
--- a/src/addons/mod/book/pages/index/index.html
+++ b/src/addons/mod/book/pages/index/index.html
@@ -1,24 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-book-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)">
-    </addon-mod-book-index>
+    <addon-mod-book-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 a10e1a5f1..74b7c4e80 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,12 +10,11 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <ion-card *ngIf="chatTime" class="core-info-card">
         <ion-item>
-            <ion-icon name="fas-clock" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-clock" slot="start" aria-hidden="true" />
             <ion-label>{{ 'addon.mod_chat.sessionstartsin' | translate:{$a: chatTime} }}</ion-label>
         </ion-item>
     </ion-card>
@@ -31,7 +30,6 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/chat/components/users-modal/users-modal.html b/src/addons/mod/chat/components/users-modal/users-modal.html
index df6fcd304..dd98dc8f9 100644
--- a/src/addons/mod/chat/components/users-modal/users-modal.html
+++ b/src/addons/mod/chat/components/users-modal/users-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -14,16 +14,16 @@
     <core-loading [hideUntil]="usersLoaded">
         <ion-item class="ion-text-wrap" *ngFor="let user of users" [class.addon-mod-chat-user]="currentUserId !== user.id && isOnline">
 
-            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar [user]="user" slot="start" [linkProfile]="false" />
             <ion-label>
                 <p class="item-heading">{{ user.fullname }}</p>
                 <ng-container *ngIf="currentUserId !== user.id && isOnline">
                     <ion-button fill="clear" (click)="talkTo(user)">
-                        <ion-icon name="fas-comments" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-comments" slot="start" aria-hidden="true" />
                         {{ 'addon.mod_chat.talk' | translate }}
                     </ion-button>
                     <ion-button fill="clear" (click)="beepTo(user)">
-                        <ion-icon name="fas-bell" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-bell" slot="start" aria-hidden="true" />
                         {{ 'addon.mod_chat.beep' | translate }}
                     </ion-button>
                 </ng-container>
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index ba9f9bc44..fd15a114c 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -1,17 +1,16 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
-                <ion-icon name="fas-users" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-users" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -28,7 +27,7 @@
                 <div class="ion-text-center addon-mod_chat-notice" *ngIf="message.special">
                     <ion-badge class="ion-text-wrap" color="success" *ngIf="message.system && message.message === 'enter'">
                         <span>
-                            <ion-icon name="fas-right-to-bracket" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-right-to-bracket" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}
                         </span>
@@ -36,7 +35,7 @@
 
                     <ion-badge class="ion-text-wrap" color="danger" *ngIf="message.system && message.message === 'exit'">
                         <span>
-                            <ion-icon name="fas-right-from-bracket" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-right-from-bracket" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}
                         </span>
@@ -44,7 +43,7 @@
 
                     <ion-badge class="ion-text-wrap" color="primary" *ngIf="message.beep === 'all'">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }}
                         </span>
@@ -53,7 +52,7 @@
                     <ion-badge class="ion-text-wrap" color="primary"
                         *ngIf="message.userid !== currentUserId && message.beep === currentUserId">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}
                         </span>
@@ -62,7 +61,7 @@
                     <ion-badge class="ion-text-wrap" color="light"
                         *ngIf="message.userid === currentUserId && message.beep && message.beep !== 'all'">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }}
                         </span>
@@ -70,12 +69,11 @@
 
                     <ion-badge class="ion-text-wrap" color="info" *ngIf="!message.system && !message.beep">
                         <span>
-                            <ion-icon name="fas-asterisk" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-asterisk" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             <strong>
                                 {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
-                                    [contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()">
-                                </core-format-text>
+                                    [contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()" />
                             </strong>
                         </span>
                     </ion-badge>
@@ -83,13 +81,11 @@
 
                 <core-message *ngIf="!message.special" [message]="message" [user]="message" [text]="message.message"
                     [time]="message.timestamp * 1000" (afterRender)="last && scrollToBottom()" contextLevel="module" [instanceId]="cmId"
-                    [courseId]="courseId">
-                </core-message>
+                    [courseId]="courseId" />
             </ng-container>
         </ion-list>
 
-        <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments" [message]="'addon.mod_chat.nomessages' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments" [message]="'addon.mod_chat.nomessages' | translate" />
     </core-loading>
 </ion-content>
 <ion-footer class="footer-adjustable">
@@ -99,8 +95,7 @@
         </p>
 
         <core-send-message-form [sendDisabled]="sending" *ngIf="isOnline && polling && loaded" [message]="newMessage"
-            (onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate">
-        </core-send-message-form>
+            (onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate" />
 
         <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" fill="outline">
             {{ 'core.login.reconnect' | translate }}
diff --git a/src/addons/mod/chat/pages/index/index.html b/src/addons/mod/chat/pages/index/index.html
index 8516625cf..07c6b8fc0 100644
--- a/src/addons/mod/chat/pages/index/index.html
+++ b/src/addons/mod/chat/pages/index/index.html
@@ -1,23 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-chat-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-chat-index>
+    <addon-mod-chat-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.html b/src/addons/mod/chat/pages/session-messages/session-messages.html
index 484ec12c8..601bd68fc 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.html
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_chat.messages' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshMessages($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list class="addon-messages-discussion-container">
@@ -23,7 +23,7 @@
                 <div class="ion-text-center addon-mod_chat-notice" *ngIf="message.special">
                     <ion-badge class="ion-text-wrap" color="success" *ngIf="message.issystem && message.message === 'enter'">
                         <span>
-                            <ion-icon name="fas-right-to-bracket" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-right-to-bracket" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}
                         </span>
@@ -31,7 +31,7 @@
 
                     <ion-badge class="ion-text-wrap" color="danger" *ngIf="message.issystem && message.message === 'exit'">
                         <span>
-                            <ion-icon name="fas-right-from-bracket" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-right-from-bracket" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}
                         </span>
@@ -39,7 +39,7 @@
 
                     <ion-badge class="ion-text-wrap" color="primary" *ngIf="message.beep === 'all'">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }}
                         </span>
@@ -48,7 +48,7 @@
                     <ion-badge class="ion-text-wrap" color="primary"
                         *ngIf="message.userid !== currentUserId && message.beep === currentUserId">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}
                         </span>
@@ -57,7 +57,7 @@
                     <ion-badge class="ion-text-wrap" color="light"
                         *ngIf="message.userid === currentUserId && message.beep && message.beep !== 'all'">
                         <span>
-                            <ion-icon name="fas-bell" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-bell" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }}
                         </span>
@@ -65,19 +65,18 @@
 
                     <ion-badge class="ion-text-wrap" color="info" *ngIf="!message.issystem && !message.beep">
                         <span>
-                            <ion-icon name="fas-asterisk" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-asterisk" aria-hidden="true" />
                             {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                             <strong>
                                 {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
-                                    [contextInstanceId]="cmId" [courseId]="courseId"></core-format-text>
+                                    [contextInstanceId]="cmId" [courseId]="courseId" />
                             </strong>
                         </span>
                     </ion-badge>
                 </div>
 
                 <core-message *ngIf="!message.special" [message]="message" [user]="message" [text]="message.message"
-                    [time]="message.timestamp * 1000" contextLevel="module" [instanceId]="cmId" [courseId]="courseId">
-                </core-message>
+                    [time]="message.timestamp * 1000" contextLevel="module" [instanceId]="cmId" [courseId]="courseId" />
             </ng-container>
         </ion-list>
     </core-loading>
diff --git a/src/addons/mod/chat/pages/sessions/sessions.html b/src/addons/mod/chat/pages/sessions/sessions.html
index c2e1b3371..8fc39d7c1 100644
--- a/src/addons/mod/chat/pages/sessions/sessions.html
+++ b/src/addons/mod/chat/pages/sessions/sessions.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_chat.chatreport' | translate }}</h1>
@@ -11,15 +11,14 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!sessions.loaded" (ionRefresh)="refreshSessions($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="sessions.loaded">
-            <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSessions()" [courseId]="courseId">
-            </core-group-selector>
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSessions()" [courseId]="courseId" />
 
             <ion-item>
                 <ion-label>{{ 'addon.mod_chat.showincompletesessions' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="showAll" (ionChange)="reloadSessions()" slot="end"></ion-toggle>
+                <ion-toggle [(ngModel)]="showAll" (ionChange)="reloadSessions()" slot="end" />
             </ion-item>
 
             <ion-card *ngFor="let session of sessions.items" (click)="sessions.select(session)" button
@@ -45,8 +44,7 @@
                 </ion-button>
             </ion-card>
 
-            <core-empty-box *ngIf="sessions.empty" icon="far-comments" [message]="'addon.mod_chat.nosessionsfound' | translate">
-            </core-empty-box>
+            <core-empty-box *ngIf="sessions.empty" icon="far-comments" [message]="'addon.mod_chat.nosessionsfound' | translate" />
         </core-loading>
     </core-split-view>
 </ion-content>
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 08e56bc8a..a362558bb 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -9,13 +9,12 @@
 <core-loading [hideUntil]="!showLoading">
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <!-- Activity availability messages -->
     <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
                 <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
                 <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
@@ -25,12 +24,12 @@
 
     <ion-card class="core-info-card" *ngIf="choiceClosed">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
                 <p *ngIf="options.length">
                     {{ 'addon.mod_choice.yourselection' | translate }}
-                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id"
+                        [courseId]="courseId" />
                 </p>
                 <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
             </ion-label>
@@ -40,7 +39,7 @@
     <!-- Inform what will happen with the choices. -->
     <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>{{ publishInfo | translate }}</ion-label>
         </ion-item>
     </ion-card>
@@ -50,17 +49,17 @@
         <ng-container *ngIf="choice.allowmultiple">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
                 </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
+                <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit" />
             </ion-item>
         </ng-container>
         <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
                 <ion-label>
-                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
                 </ion-label>
-                <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
+                <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit" />
             </ion-item>
         </ion-radio-group>
     </ion-card>
@@ -75,14 +74,13 @@
             <ion-row>
                 <ion-col size="12" size-lg="5">
                     <ion-item class="ion-text-wrap core-warning-item" *ngIf="hasOffline">
-                        <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true" />
                         <ion-label>{{ 'addon.mod_choice.resultsnotsynced' | translate }}</ion-label>
                     </ion-item>
                     <ion-item>
                         <ion-label>
                             <core-chart type="pie" [data]="data" [labels]="labels" height="300" contextLevel="module"
-                                [contextInstanceId]="module.id" [courseId]="courseId">
-                            </core-chart>
+                                [contextInstanceId]="module.id" [courseId]="courseId" />
                         </ion-label>
                     </ion-item>
                 </ion-col>
@@ -91,13 +89,11 @@
                         <ion-item [button]="result.numberofuser > 0" class="divider ion-text-wrap" (click)="toggle(result)"
                             [attr.aria-label]="(result.expanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                             <ion-icon [name]="result.numberofuser > 0 ? 'fas-chevron-right' : ''" flip-rtl slot="start" aria-hidden="true"
-                                class="expandable-status-icon" [class.expandable-status-icon-expanded]="result.expanded">
-                            </ion-icon>
+                                class="expandable-status-icon" [class.expandable-status-icon-expanded]="result.expanded" />
                             <ion-label>
                                 <h3 class="item-heading">
                                     <core-format-text [text]="result.text" contextLevel="module" [contextInstanceId]="module.id"
-                                        [courseId]="courseId">
-                                    </core-format-text>
+                                        [courseId]="courseId" />
                                 </h3>
                                 <p>
                                     {{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }}
@@ -111,7 +107,7 @@
                         <ng-container *ngIf="result.expanded">
                             <ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId" [userId]="user.userid"
                                 [attr.aria-label]="user.fullname" class="ion-text-wrap">
-                                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
+                                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false" />
                                 <ion-label>
                                     <p>{{user.fullname}}</p>
                                 </ion-label>
@@ -125,7 +121,7 @@
 
     <ion-card class="core-info-card" *ngIf="!canSeeResults && !choiceNotOpenYet">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
                 <p>{{ 'addon.mod_choice.noresultsviewable' | translate }}</p>
             </ion-label>
@@ -143,8 +139,7 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
 
@@ -153,8 +148,7 @@
 <!-- Template to render a choice option label. -->
 <ng-template #optionLabelTemplate let-option="option">
     <p>
-        <core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-        </core-format-text>
+        <core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
         <span *ngIf="choice!.limitanswers && option.countanswers >= option.maxanswers">
             {{ 'addon.mod_choice.full' | translate }}
         </span>
diff --git a/src/addons/mod/choice/pages/index/index.html b/src/addons/mod/choice/pages/index/index.html
index b1837e151..4f5850db2 100644
--- a/src/addons/mod/choice/pages/index/index.html
+++ b/src/addons/mod/choice/pages/index/index.html
@@ -1,23 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-choice-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-choice-index>
+    <addon-mod-choice-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/data/components/action/addon-mod-data-action.html b/src/addons/mod/data/components/action/addon-mod-data-action.html
index 2fca169f6..26315c8b0 100644
--- a/src/addons/mod/data/components/action/addon-mod-data-action.html
+++ b/src/addons/mod/data/components/action/addon-mod-data-action.html
@@ -1,49 +1,48 @@
 <ion-button size="small" *ngIf="action === 'actionsmenu'" fill="clear" (click)="actionsMenu($event)"
     [attr.aria-label]="'addon.mod_data.actionsmenu' | translate">
-    <ion-icon name="fas-ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-ellipsis-vertical" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'more'" fill="clear" (click)="viewEntry()"
     [attr.aria-label]="'addon.mod_data.showmore' | translate">
-    <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
-    <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'delete' && !entry.deleted" fill="clear" color="danger" (click)="deleteEntry()"
     [attr.aria-label]="'core.delete' | translate">
-    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'delete' && entry.deleted" fill="clear" color="danger" (click)="undoDelete()"
     [attr.aria-label]="'core.restore' | translate">
-    <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'approve'" fill="clear" (click)="approveEntry()"
     [attr.aria-label]="'addon.mod_data.approve' | translate">
-    <ion-icon name="fas-thumbs-up" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-thumbs-up" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'disapprove'" fill="clear" (click)="disapproveEntry()"
     [attr.aria-label]="'addon.mod_data.disapprove' | translate">
-    <ion-icon name="far-thumbs-down" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="far-thumbs-down" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <core-comments *ngIf="action === 'comments' && mode === 'list'" contextLevel="module" [instanceId]="database.coursemodule"
-    component="mod_data" [itemId]="entry.id" area="database_entry" [courseId]="database.course">
-</core-comments>
+    component="mod_data" [itemId]="entry.id" area="database_entry" [courseId]="database.course" />
 
 <span *ngIf="action === 'timeadded'">{{ entry.timecreated * 1000 | coreFormatDate }}</span>
 <span *ngIf="action === 'timemodified'">{{ entry.timemodified * 1000 | coreFormatDate }}</span>
 
 <core-user-avatar *ngIf="action === 'userpicture'" [user]="entry" slot="start" [courseId]="database.course" [userId]="entry.userid"
-    [profileUrl]="userPicture"></core-user-avatar>
+    [profileUrl]="userPicture" />
 
 <a *ngIf="action === 'user' && entry" core-user-link [courseId]="database.course" [userId]="entry.userid" [title]="entry.fullname">
     {{entry.fullname}}
 </a>
 
-<core-tag-list *ngIf="tagsEnabled && action === 'tags' && entry" [tags]="entry.tags"></core-tag-list>
+<core-tag-list *ngIf="tagsEnabled && action === 'tags' && entry" [tags]="entry.tags" />
diff --git a/src/addons/mod/data/components/actionsmenu/actionsmenu.html b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
index eadbe7c6a..70fe1df31 100644
--- a/src/addons/mod/data/components/actionsmenu/actionsmenu.html
+++ b/src/addons/mod/data/components/actionsmenu/actionsmenu.html
@@ -5,7 +5,7 @@
             <ion-label>
                 <p class="item-heading">{{ item.text | translate }}</p>
             </ion-label>
-            <ion-icon [name]="item.icon" slot="end" aria-hidden="true"></ion-icon>
+            <ion-icon [name]="item.icon" slot="end" aria-hidden="true" />
         </ion-item>
     </ion-list>
 
diff --git a/src/addons/mod/data/components/field-plugin/addon-mod-data-field-plugin.html b/src/addons/mod/data/components/field-plugin/addon-mod-data-field-plugin.html
index c738b7d01..6a9ff5ec9 100644
--- a/src/addons/mod/data/components/field-plugin/addon-mod-data-field-plugin.html
+++ b/src/addons/mod/data/components/field-plugin/addon-mod-data-field-plugin.html
@@ -1,4 +1,4 @@
 <core-dynamic-component [component]="fieldComponent" [data]="pluginData">
     <!-- This content will be replaced by the component if found. -->
-    <core-loading [hideUntil]="fieldLoaded" [fullscreen]="false"></core-loading>
+    <core-loading [hideUntil]="fieldLoaded" [fullscreen]="false" />
 </core-dynamic-component>
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 841034633..269610acf 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
@@ -1,19 +1,17 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button *ngIf="canSearch" (click)="showSearch()" [attr.aria-label]="'addon.mod_data.search' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <core-context-menu>
         <core-context-menu-item [priority]="500" *ngIf="canAdd" [content]="'addon.mod_data.addentries' | translate" iconAction="fas-plus"
-            (action)="gotoAddEntries()">
-        </core-context-menu-item>
+            (action)="gotoAddEntries()" />
         <core-context-menu-item [priority]="400" *ngIf="firstEntry" [content]="'addon.mod_data.single' | translate" iconAction="fas-file"
-            (action)="gotoEntry(firstEntry)">
-        </core-context-menu-item>
+            (action)="gotoEntry(firstEntry)" />
     </core-context-menu>
 
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -22,30 +20,28 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings" (completionChanged)="onCompletionChange()" />
 
     <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)"
-        [courseId]="database?.course">
-    </core-group-selector>
+        [courseId]="database?.course" />
 
     <ion-card class="core-info-card" *ngIf="!access?.timeavailable && timeAvailableFrom">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>{{ 'addon.mod_data.notopenyet' | translate:{$a: timeAvailableFromReadable} }}</ion-label>
         </ion-item>
     </ion-card>
 
     <ion-card class="core-info-card" *ngIf="!access?.timeavailable && timeAvailableTo">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>{{ 'addon.mod_data.expired' | translate:{$a: timeAvailableToReadable} }}</ion-label>
         </ion-item>
     </ion-card>
 
     <ion-card class="core-info-card" *ngIf="access && access.entrieslefttoview">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'addon.mod_data.entrieslefttoaddtoview' | translate:{$a: {entrieslefttoview: access.entrieslefttoview} } }}
             </ion-label>
@@ -54,7 +50,7 @@
 
     <ion-card class="core-info-card" *ngIf="access && access.entrieslefttoadd">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'addon.mod_data.entrieslefttoadd' | translate:{$a: {entriesleft: access.entrieslefttoadd} } }}
             </ion-label>
@@ -79,30 +75,29 @@
     </ng-container>
 
     <div class="addon-data-contents addon-data-entries-{{database.id}}" *ngIf="!isEmpty && database">
-        <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}"></core-style>
+        <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}" />
 
-        <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
+        <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports" />
     </div>
 
     <ion-grid *ngIf="search.page > 0 || hasNextPage">
         <ion-row class="ion-align-items-center">
             <ion-col *ngIf="search.page > 0">
                 <ion-button expand="block" fill="outline" (click)="searchEntries(search.page - 1)">
-                    <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                     {{ 'core.previous' | translate }}
                 </ion-button>
             </ion-col>
             <ion-col *ngIf="hasNextPage">
                 <ion-button expand="block" (click)="searchEntries(search.page + 1)">
                     {{ 'core.next' | translate }}
-                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                 </ion-button>
             </ion-col>
         </ion-row>
     </ion-grid>
 
-    <core-empty-box *ngIf="isEmpty && !search.searching" icon="fas-database" [message]="'addon.mod_data.norecords' | translate">
-    </core-empty-box>
+    <core-empty-box *ngIf="isEmpty && !search.searching" icon="fas-database" [message]="'addon.mod_data.norecords' | translate" />
 
     <core-empty-box *ngIf="isEmpty && search.searching" icon="fas-database" [message]="'addon.mod_data.nomatch' | translate"
         class="core-empty-box-clickable">
@@ -111,12 +106,11 @@
 
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-</core-course-module-navigation>
+<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id" />
 
 <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd">
     <ion-fab-button (click)="gotoAddEntries()" [attr.aria-label]="'addon.mod_data.addentries' | translate">
-        <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-plus" aria-hidden="true" />
         <span class="sr-only">{{ 'addon.mod_data.addentries' | translate }}</span>
     </ion-fab-button>
 </ion-fab>
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index 445d8b2aa..4071d5917 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -13,15 +13,14 @@
 <ion-content>
     <ion-item>
         <ion-label>{{ 'addon.mod_data.advancedsearch' | translate }}</ion-label>
-        <ion-toggle [(ngModel)]="search.searchingAdvanced" slot="end"></ion-toggle>
+        <ion-toggle [(ngModel)]="search.searchingAdvanced" slot="end" />
     </ion-item>
     <form (ngSubmit)="searchEntries($event)" [formGroup]="searchForm" #searchFormEl>
         <ion-list class="ion-no-margin">
             <ion-item [hidden]="search.searchingAdvanced">
                 <ion-label class="sr-only">{{ 'addon.mod_data.search' | translate}}</ion-label>
                 <ion-input type="text" placeholder="{{ 'addon.mod_data.search' | translate}}" [(ngModel)]="search.text" name="text"
-                    formControlName="text">
-                </ion-input>
+                    formControlName="text" />
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">{{ 'core.sortby' | translate }}</ion-label>
@@ -45,21 +44,21 @@
                 <ion-radio-group [(ngModel)]="search.sortDirection" name="sortDirection" formControlName="sortDirection">
                     <ion-item>
                         <ion-label>{{ 'addon.mod_data.ascending' | translate }}</ion-label>
-                        <ion-radio slot="start" value="ASC"></ion-radio>
+                        <ion-radio slot="start" value="ASC" />
                     </ion-item>
                     <ion-item>
                         <ion-label>{{ 'addon.mod_data.descending' | translate }}</ion-label>
-                        <ion-radio slot="start" value="DESC"></ion-radio>
+                        <ion-radio slot="start" value="DESC" />
                     </ion-item>
                 </ion-radio-group>
             </ion-list>
             <div class="ion-padding addon-data-advanced-search" [hidden]="!advancedSearch || !search.searchingAdvanced">
-                <core-compile-html [text]="advancedSearch" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
+                <core-compile-html [text]="advancedSearch" [jsData]="jsData" [extraImports]="extraImports" />
             </div>
         </ion-list>
         <div class="ion-padding">
             <ion-button expand="block" type="submit">
-                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                 {{ 'addon.mod_data.search' | translate }}
             </ion-button>
         </div>
diff --git a/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html b/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
index 1081bbda9..abca23146 100644
--- a/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
+++ b/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
@@ -5,13 +5,12 @@
         interface="alert">
         <ion-select-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-select-option>
     </ion-select>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
     <ion-item *ngIf="searchMode">
         <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']">
-        </ion-checkbox>
+        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']" />
     </ion-item>
 </span>
 
-<core-format-text *ngIf="displayMode && value && value.content" [text]="value.content" [filter]="false"></core-format-text>
+<core-format-text *ngIf="displayMode && value && value.content" [text]="value.content" [filter]="false" />
diff --git a/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html b/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
index e1f3e1fd3..596b8cf49 100644
--- a/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
+++ b/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
@@ -1,14 +1,12 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
     <ion-datetime [formControlName]="'f_'+field.id" [placeholder]="'core.date' | translate" [max]="maxDate" [min]="minDate"
-        [disabled]="searchMode && !searchFields!['f_'+field.id+'_z']" [displayFormat]="format" [displayTimezone]="displayTimezone">
-    </ion-datetime>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+        [disabled]="searchMode && !searchFields!['f_'+field.id+'_z']" [displayFormat]="format" [displayTimezone]="displayTimezone" />
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
     <ion-item *ngIf="searchMode">
         <ion-label>{{ 'addon.mod_data.usedate' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields!['f_'+field.id+'_z']">
-        </ion-checkbox>
+        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields!['f_'+field.id+'_z']" />
     </ion-item>
 </span>
 
diff --git a/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html b/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
index c66729d2b..1d8b879e0 100644
--- a/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
+++ b/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
@@ -1,17 +1,16 @@
 <span *ngIf="editMode && form">
     <span [core-mark-required]="field.required" class="core-mark-required"></span>
     <core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId"
-        [allowOffline]="true" [courseId]="database?.course">
-    </core-attachments>
-    <core-input-errors *ngIf="error" [errorText]="error"></core-input-errors>
+        [allowOffline]="true" [courseId]="database?.course" />
+    <core-input-errors *ngIf="error" [errorText]="error" />
 </span>
 
 <span *ngIf="searchMode && form" [formGroup]="form">
-    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
 </span>
 
 <ng-container *ngIf="displayMode">
     <div>
-        <core-files [files]="files" [component]="component" [componentId]="componentId" [alwaysDownload]="true"></core-files>
+        <core-files [files]="files" [component]="component" [componentId]="componentId" [alwaysDownload]="true" />
     </div>
 </ng-container>
diff --git a/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html b/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
index 5851d3765..eee88521b 100644
--- a/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
+++ b/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
@@ -1,23 +1,23 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
-    <ion-input *ngIf="searchMode" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id"></ion-input>
+    <ion-input *ngIf="searchMode" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id" />
 
     <ng-container *ngIf="editMode">
         <span [core-mark-required]="field.required" class="core-mark-required"></span>
         <div class="addon-data-latlong">
-            <ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10"></ion-input>
+            <ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" />
             <span class="placeholder-icon" item-right>°N</span>
         </div>
         <div class="addon-data-latlong">
-            <ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10"></ion-input>
+            <ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" />
             <span class="placeholder-icon" item-right>°E</span>
         </div>
         <div class="addon-data-latlong" *ngIf="locationServicesEnabled">
             <ion-button (click)="getLocation($event)">
-                <ion-icon name="fas-crosshairs" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-crosshairs" slot="start" aria-hidden="true" />
                 {{ 'addon.mod_data.mylocation' | translate }}
             </ion-button>
         </div>
-        <core-input-errors *ngIf="error" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+        <core-input-errors *ngIf="error" [control]="form.controls['f_'+field.id]" [errorText]="error" />
     </ng-container>
 </span>
 
diff --git a/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html b/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
index a3b12a099..cc2184808 100644
--- a/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
+++ b/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
@@ -5,7 +5,7 @@
         <ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
         <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
     </ion-select>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <span *ngIf="displayMode && value && value.content">{{ value.content }}</span>
diff --git a/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html b/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
index a1c003849..455677ce0 100644
--- a/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
+++ b/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
@@ -5,14 +5,13 @@
         interface="alert">
         <ion-select-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-select-option>
     </ion-select>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
 
     <ion-item *ngIf="searchMode">
         <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']">
-        </ion-checkbox>
+        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']" />
     </ion-item>
 </span>
 
-<core-format-text *ngIf="displayMode && value && value.content" [text]="value.content" [filter]="false"></core-format-text>
+<core-format-text *ngIf="displayMode && value && value.content" [text]="value.content" [filter]="false" />
diff --git a/src/addons/mod/data/fields/number/component/addon-mod-data-field-number.html b/src/addons/mod/data/fields/number/component/addon-mod-data-field-number.html
index 2bd75978b..f7a295261 100644
--- a/src/addons/mod/data/fields/number/component/addon-mod-data-field-number.html
+++ b/src/addons/mod/data/fields/number/component/addon-mod-data-field-number.html
@@ -1,7 +1,7 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-input type="number" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <ion-input type="number" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <span *ngIf="displayMode && value && value.content">{{ value.content }}</span>
diff --git a/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html b/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
index 4a9e62bb7..99cfcd004 100644
--- a/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
+++ b/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
@@ -1,17 +1,15 @@
 <span *ngIf="editMode && form" [formGroup]="form">
     <span [core-mark-required]="field.required" class="core-mark-required"></span>
     <core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId"
-        [allowOffline]="true" acceptedTypes="image" [courseId]="database?.course">
-    </core-attachments>
-    <core-input-errors *ngIf="error" [errorText]="error"></core-input-errors>
+        [allowOffline]="true" acceptedTypes="image" [courseId]="database?.course" />
+    <core-input-errors *ngIf="error" [errorText]="error" />
 
     <ion-label position="stacked">{{ 'addon.mod_data.alttext' | translate }}</ion-label>
-    <ion-input type="text" [formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate">
-    </ion-input>
+    <ion-input type="text" [formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate" />
 </span>
 
 <span *ngIf="searchMode && form" [formGroup]="form">
-    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
 </span>
 
 <button class="as-link" *ngIf="listMode && imageUrl" (click)="navigateEntry()">
diff --git a/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html b/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
index 31e37921b..1f51004cc 100644
--- a/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
+++ b/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
@@ -6,7 +6,7 @@
         <ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
         <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
     </ion-select>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <span *ngIf="displayMode && value && value.content">{{ value.content }}</span>
diff --git a/src/addons/mod/data/fields/text/component/addon-mod-data-field-text.html b/src/addons/mod/data/fields/text/component/addon-mod-data-field-text.html
index af610893a..597ccec16 100644
--- a/src/addons/mod/data/fields/text/component/addon-mod-data-field-text.html
+++ b/src/addons/mod/data/fields/text/component/addon-mod-data-field-text.html
@@ -1,7 +1,7 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <span *ngIf="displayMode && value && value.content">{{ value.content }}</span>
diff --git a/src/addons/mod/data/fields/textarea/component/addon-mod-data-field-textarea.html b/src/addons/mod/data/fields/textarea/component/addon-mod-data-field-textarea.html
index 1b4e97cae..bfa25fc6e 100644
--- a/src/addons/mod/data/fields/textarea/component/addon-mod-data-field-textarea.html
+++ b/src/addons/mod/data/fields/textarea/component/addon-mod-data-field-textarea.html
@@ -1,14 +1,12 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
-    <ion-input *ngIf="searchMode" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id"></ion-input>
+    <ion-input *ngIf="searchMode" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id" />
 
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
     <core-rich-text-editor *ngIf="editMode" [control]="form.controls['f_'+field.id]" [placeholder]="field.name" [name]="'f_'+field.id"
         [component]="component" [componentId]="componentId" [autoSave]="true" contextLevel="module" [contextInstanceId]="componentId"
-        [elementId]="'field_'+field.id" ngDefaultControl>
-    </core-rich-text-editor>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+        [elementId]="'field_'+field.id" ngDefaultControl />
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <core-format-text *ngIf="displayMode && value" [text]="format(value)" [component]="component" [componentId]="componentId"
-    contextLevel="module" [contextInstanceId]="componentId" [courseId]="database!.course">
-</core-format-text>
+    contextLevel="module" [contextInstanceId]="componentId" [courseId]="database!.course" />
diff --git a/src/addons/mod/data/fields/url/component/addon-mod-data-field-url.html b/src/addons/mod/data/fields/url/component/addon-mod-data-field-url.html
index 059d0ceab..8b446be20 100644
--- a/src/addons/mod/data/fields/url/component/addon-mod-data-field-url.html
+++ b/src/addons/mod/data/fields/url/component/addon-mod-data-field-url.html
@@ -1,7 +1,7 @@
 <span *ngIf="inputMode && form" [formGroup]="form">
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-input type="url" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
-    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error"></core-input-errors>
+    <ion-input type="url" [formControlName]="'f_'+field.id" [placeholder]="field.name" />
+    <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
 
 <ng-container *ngIf="displayMode && value && value.content">
diff --git a/src/addons/mod/data/pages/edit/edit.html b/src/addons/mod/data/pages/edit/edit.html
index 5cede4d25..f4916f20f 100644
--- a/src/addons/mod/data/pages/edit/edit.html
+++ b/src/addons/mod/data/pages/edit/edit.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
@@ -19,14 +18,13 @@
 <ion-content>
     <core-loading [hideUntil]="loaded">
         <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)"
-            [courseId]="database?.course">
-        </core-group-selector>
+            [courseId]="database?.course" />
 
         <div class="addon-data-contents {{cssClass}}" *ngIf="database">
-            <core-style [css]="database.csstemplate" prefix=".{{cssClass}}"></core-style>
+            <core-style [css]="database.csstemplate" prefix=".{{cssClass}}" />
 
             <form (ngSubmit)="save($event)" [formGroup]="editForm" #editFormEl>
-                <core-compile-html [text]="editFormRender" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
+                <core-compile-html [text]="editFormRender" [jsData]="jsData" [extraImports]="extraImports" />
             </form>
         </div>
     </core-loading>
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 53a41d6b3..d536d0ee9 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
@@ -14,57 +13,51 @@
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!entryLoaded || !(isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
         (ionRefresh)="refreshDatabase($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
         <!-- Database entries found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleName} }}</ion-label>
             </ion-item>
         </ion-card>
 
         <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="setGroup(selectedGroup)"
-            [courseId]="courseId">
-        </core-group-selector>
+            [courseId]="courseId" />
 
         <div class="addon-data-contents addon-data-entry addon-data-entries-{{database.id}}" *ngIf="database && entry">
-            <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}"></core-style>
+            <core-style [css]="database.csstemplate" prefix=".addon-data-entries-{{database.id}}" />
 
-            <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports" (compiling)="setRenderingEntry($event)">
-            </core-compile-html>
+            <core-compile-html [text]="entryHtml" [jsData]="jsData" [extraImports]="extraImports" (compiling)="setRenderingEntry($event)" />
         </div>
 
         <core-rating-rate *ngIf="database && entry && ratingInfo && (!database.approval || entry.approved)" [ratingInfo]="ratingInfo"
             contextLevel="module" [instanceId]="database.coursemodule" [itemId]="entry.id" [itemSetId]="0" [courseId]="courseId"
             [aggregateMethod]="database.assessed" [scaleId]="database.scale" [userId]="entry.userid" (onLoading)="setLoadingRating($event)"
-            (onUpdate)="ratingUpdated()">
-        </core-rating-rate>
+            (onUpdate)="ratingUpdated()" />
         <core-rating-aggregate *ngIf="database && entry && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module"
             [instanceId]="database.coursemodule" [itemId]="entry.id" [courseId]="courseId" [aggregateMethod]="database.assessed"
-            [scaleId]="database.scale">
-        </core-rating-aggregate>
+            [scaleId]="database.scale" />
 
         <core-comments *ngIf="database && database.comments && entry && entry.id > 0 && commentsEnabled" contextLevel="module"
             [instanceId]="database.coursemodule" component="mod_data" [itemId]="entry.id" area="database_entry" [courseId]="courseId"
-            (onLoading)="setLoadingComments($event)" [showItem]="true">
-        </core-comments>
+            (onLoading)="setLoadingComments($event)" [showItem]="true" />
     </core-loading>
     <div collapsible-footer *ngIf="entryLoaded && hasPrevious || hasNext" slot="fixed" appearOnBottom>
         <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]="!hasPrevious" fill="clear" [attr.aria-label]="'core.previous' | translate"
                     (click)="gotoEntry(offset! -1)">
-                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-col>
-            <ion-col class="ion-text-center">
-            </ion-col>
+            <ion-col class="ion-text-center" />
             <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
                 <ion-button [disabled]="!hasNext" fill="clear" [attr.aria-label]=" 'core.next' | translate"
                     (click)="gotoEntry(offset! + 1)">
-                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-col>
         </ion-row>
diff --git a/src/addons/mod/data/pages/index/index.html b/src/addons/mod/data/pages/index/index.html
index 4d0cd6995..53330fce1 100644
--- a/src/addons/mod/data/pages/index/index.html
+++ b/src/addons/mod/data/pages/index/index.html
@@ -1,25 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-data-index [module]="module" [courseId]="courseId" [group]="group" (dataRetrieved)="updateData($event)">
-    </addon-mod-data-index>
+    <addon-mod-data-index [module]="module" [courseId]="courseId" [group]="group" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 fbe9ce761..dbeae8223 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,26 +10,25 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <core-tabs [hideUntil]="tabsReady" [selectedIndex]="firstSelectedTab">
         <core-tab [title]="'addon.mod_feedback.overview' | translate" id="overview" (ionSelect)="tabChanged('overview')">
             <ng-template>
-                <ng-container *ngTemplateOutlet="tabOverview"></ng-container>
+                <ng-container *ngTemplateOutlet="tabOverview" />
             </ng-template>
         </core-tab>
         <core-tab *ngIf="showAnalysis && access && access.canviewreports" id="analysis" [title]="'addon.mod_feedback.analysis' | translate"
             (ionSelect)="tabChanged('analysis')">
             <ng-template>
-                <ng-container *ngTemplateOutlet="tabAnalysis"></ng-container>
+                <ng-container *ngTemplateOutlet="tabAnalysis" />
             </ng-template>
         </core-tab>
 
         <core-tab *ngIf="showAnalysis && access && !access.canviewreports" id="analysis"
             [title]="'addon.mod_feedback.completed_feedbacks' | translate" (ionSelect)="tabChanged('analysis')">
             <ng-template>
-                <ng-container *ngTemplateOutlet="tabAnalysis"></ng-container>
+                <ng-container *ngTemplateOutlet="tabAnalysis" />
             </ng-template>
         </core-tab>
     </core-tabs>
@@ -39,7 +38,7 @@
             *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
             <ion-button *ngIf="access.canedititems || access.canviewreports" expand="block" fill="outline"
                 (click)="gotoAnswerQuestions(true)" class="ion-margin ion-text-wrap">
-                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                 {{ 'addon.mod_feedback.preview' | translate }}
             </ion-button>
             <ion-button *ngIf="access.cancomplete && access.cansubmit && access.isopen" expand="block" (click)="gotoAnswerQuestions()"
@@ -53,15 +52,13 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
 
 <ng-template #basicInfo>
     <ion-list *ngIf="access && access.canviewanalysis && !access.isempty">
-        <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId">
-        </core-group-selector>
+        <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId" />
 
         <ion-item class="ion-text-wrap" (click)="openAttempts()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
             [detail]="true" [button]="access.canviewreports && completedCount > 0">
@@ -98,18 +95,18 @@
 <!-- Template to render the overview. -->
 <ng-template #tabOverview>
     <core-loading [hideUntil]="tabsLoaded.overview">
-        <ng-container *ngTemplateOutlet="basicInfo"></ng-container>
+        <ng-container *ngTemplateOutlet="basicInfo" />
 
         <ion-card class="core-info-card" *ngIf="access && access.cancomplete && !access.isopen">
             <ion-item>
-                <ion-icon name="fas-circle-question" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_feedback.feedback_is_not_open' | translate }}</ion-label>
             </ion-item>
         </ion-card>
 
         <ion-card class="core-success-card" *ngIf="access && access.cancomplete && access.isopen && !access.cansubmit">
             <ion-item>
-                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}</ion-label>
             </ion-item>
         </ion-card>
@@ -131,8 +128,7 @@
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_feedback.page_after_submit' | translate }}</p>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="feedback.page_after_submit"
-                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
             <ng-container *ngIf="!access.isempty">
@@ -151,12 +147,12 @@
 <!-- Template to render the analysis. -->
 <ng-template #tabAnalysis>
     <core-loading [hideUntil]="tabsLoaded.analysis">
-        <ng-container *ngTemplateOutlet="basicInfo"></ng-container>
+        <ng-container *ngTemplateOutlet="basicInfo" />
 
         <ng-container *ngIf="access && (access.canedititems || !access.isempty)">
             <ion-card class="core-info-card" *ngIf="warning">
                 <ion-item>
-                    <ion-icon name="fas-circle-question" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
                     <ion-label>{{ warning }}</ion-label>
                 </ion-item>
             </ion-card>
@@ -166,13 +162,11 @@
                     <ion-label>
                         <p class="item-heading">
                             {{item.num}}. <core-format-text [component]="component" [componentId]="componentId" [text]="item.name"
-                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                            </core-format-text>
+                                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                         </p>
                         <p>
                             <core-format-text [component]="component" [componentId]="componentId" [text]="item.label" contextLevel="module"
-                                [contextInstanceId]="module.id" [courseId]="courseId">
-                            </core-format-text>
+                                [contextInstanceId]="module.id" [courseId]="courseId" />
                         </p>
                         <ng-container [ngSwitch]="item.templateName">
                             <ng-container *ngSwitchCase="'numeric'">
@@ -190,8 +184,7 @@
                             </ng-container>
                             <ng-container *ngSwitchCase="'chart'">
                                 <core-chart [type]="item.chartType" [data]="item.chartData" [labels]="item.labels" height="300"
-                                    contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true" [courseId]="courseId">
-                                </core-chart>
+                                    contextLevel="module" [contextInstanceId]="module.id" [wsNotFiltered]="true" [courseId]="courseId" />
                                 <p *ngIf="item.average">
                                     {{ 'addon.mod_feedback.average' | translate }}: {{item.average | number : '1.2-2'}}
                                 </p>
diff --git a/src/addons/mod/feedback/pages/attempt/attempt.html b/src/addons/mod/feedback/pages/attempt/attempt.html
index a8d28e106..841a5dd9b 100644
--- a/src/addons/mod/feedback/pages/attempt/attempt.html
+++ b/src/addons/mod/feedback/pages/attempt/attempt.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="attempt">{{ attempt.fullname }}</h1>
@@ -14,7 +14,7 @@
         <ion-list class="ion-no-margin" *ngIf="attempt || anonAttempt">
             <ion-item *ngIf="attempt" class="ion-text-wrap" core-user-link [userId]="attempt.userid"
                 [attr.aria-label]="'core.user.viewprofile' | translate" [courseId]="attempt.courseid">
-                <core-user-avatar [user]="attempt" slot="start" [linkProfile]="false"></core-user-avatar>
+                <core-user-avatar [user]="attempt" slot="start" [linkProfile]="false" />
                 <ion-label>
                     <h2>{{attempt.fullname}}</h2>
                     <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate }}</p>
@@ -22,7 +22,7 @@
             </ion-item>
 
             <ion-item class="ion-text-wrap" *ngIf="anonAttempt">
-                <core-user-avatar [linkProfile]="false" slot="start"></core-user-avatar>
+                <core-user-avatar [linkProfile]="false" slot="start" />
                 <ion-label>
                     <h2>{{ 'addon.mod_feedback.anonymous_user' |translate }}</h2>
                     <p>{{ 'addon.mod_feedback.response_nr' | translate }}: {{anonAttempt.number}}</p>
@@ -30,19 +30,17 @@
             </ion-item>
             <ng-container *ngIf="items && items.length">
                 <ng-container *ngFor="let item of items">
-                    <core-spacer *ngIf="item.typ === 'pagebreak'"></core-spacer>
+                    <core-spacer *ngIf="item.typ === 'pagebreak'" />
                     <ion-item class="ion-text-wrap" *ngIf="item.typ !== 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
                         <ion-label>
                             <p class="item-heading" *ngIf="item.name" [core-mark-required]="item.required">
                                 <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
                                 <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
-                                    [contextInstanceId]="cmId" [courseId]="courseId">
-                                </core-format-text>
+                                    [contextInstanceId]="cmId" [courseId]="courseId" />
                             </p>
                             <p *ngIf="item.submittedValue">
                                 <core-format-text [component]="component" [componentId]="cmId" [text]="item.submittedValue"
-                                    contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                                </core-format-text>
+                                    contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
                             </p>
                         </ion-label>
                     </ion-item>
diff --git a/src/addons/mod/feedback/pages/attempts/attempts.html b/src/addons/mod/feedback/pages/attempts/attempts.html
index 39cec4859..0b1ec781b 100644
--- a/src/addons/mod/feedback/pages/attempts/attempts.html
+++ b/src/addons/mod/feedback/pages/attempts/attempts.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
@@ -11,13 +11,12 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!attempts || !attempts.loaded" (ionRefresh)="refreshFeedback($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="attempts && attempts.loaded">
             <ion-list class="ion-no-margin">
                 <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="reloadAttempts()"
-                    [courseId]="courseId">
-                </core-group-selector>
+                    [courseId]="courseId" />
 
                 <ng-container *ngIf="identifiableAttemptsTotal > 0">
                     <ion-item-divider>
@@ -27,7 +26,7 @@
                     </ion-item-divider>
                     <ion-item *ngFor="let attempt of identifiableAttempts" class="ion-text-wrap" button [detail]="true"
                         (click)="attempts?.select(attempt)" [attr.aria-current]="attempts?.getItemAriaCurrent(attempt)">
-                        <core-user-avatar [user]="attempt" [linkProfile]="false" slot="start"></core-user-avatar>
+                        <core-user-avatar [user]="attempt" [linkProfile]="false" slot="start" />
                         <ion-label>
                             <p class="item-heading">{{ attempt.fullname }}</p>
                             <p *ngIf="attempt.timemodified">{{ attempt.timemodified * 1000 | coreFormatDate }}</p>
@@ -43,7 +42,7 @@
                     </ion-item-divider>
                     <ion-item *ngFor="let attempt of anonymousAttempts" class="ion-text-wrap" button [detail]="true"
                         (click)="attempts?.select(attempt)" [attr.aria-current]="attempts?.getItemAriaCurrent(attempt)">
-                        <core-user-avatar [linkProfile]="false" slot="start"></core-user-avatar>
+                        <core-user-avatar [linkProfile]="false" slot="start" />
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_feedback.anonymous_user' | translate }}</p>
                             <p>{{ 'addon.mod_feedback.response_nr' | translate }}: {{attempt.number}}</p>
@@ -52,8 +51,7 @@
                 </ng-container>
 
                 <core-infinite-loading [enabled]="attempts && attempts.loaded && !attempts.completed" [error]="fetchFailed"
-                    (action)="fetchMoreAttempts($event)">
-                </core-infinite-loading>
+                    (action)="fetchMoreAttempts($event)" />
             </ion-list>
         </core-loading>
     </core-split-view>
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 4f55ac59e..0f6671a84 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
@@ -23,7 +22,7 @@
                     </ion-label>
                 </ion-item>
                 <ng-container *ngFor="let item of items">
-                    <core-spacer *ngIf="item.typ === 'pagebreak'"></core-spacer>
+                    <core-spacer *ngIf="item.typ === 'pagebreak'" />
                     <ng-container *ngIf="item.typ !== 'pagebreak'">
                         <ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
                             [class.core-danger-item]="item.isEmpty || item.hasError">
@@ -31,42 +30,36 @@
                                 <p *ngIf="item.name" [core-mark-required]="item.required">
                                     <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
-                                        [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true">
-                                    </core-format-text>
+                                        [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true" />
                                     <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
                                 </p>
                                 <p *ngIf="item.templateName === 'label'">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="item.presentation"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
-                                    </core-format-text>
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </p>
                             </ion-label>
 
                             <ion-input *ngIf="item.templateName === 'textfield'" type="text" [(ngModel)]="item.value" autocorrect="off"
-                                name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}" [required]="item.required">
-                            </ion-input>
+                                name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}" [required]="item.required" />
 
                             <ng-container *ngIf="item.templateName === 'numeric'">
                                 <ion-input type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
-                                    [required]="item.required">
-                                </ion-input>
+                                    [required]="item.required" />
                                 <ion-text *ngIf="item.hasError" color="danger" class="addon-mod_feedback-item-error">
                                     {{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}
                                     <span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]
                                 </ion-text>
                             </ng-container>
 
-                            <ion-textarea *ngIf="item.templateName === 'textarea'" [required]="item.required" name="{{item.typ}}_{{item.id}}"
-                                [(ngModel)]="item.value">
-                            </ion-textarea>
+                            <ion-textarea *ngIf="item.templateName === 'textarea'" [required]="item.required"
+                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" />
 
                             <ion-select *ngIf="item.templateName === 'multichoice-d'" [required]="item.required"
                                 name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet"
                                 [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: item.name}">
                                 <ion-select-option *ngFor="let option of item.choices" [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
-                                    </core-format-text>
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </ion-select-option>
                             </ion-select>
                         </ion-item>
@@ -76,10 +69,9 @@
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-label>
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
-                                    </core-format-text>
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </ion-label>
-                                <ion-radio slot="start" [value]="option.value"></ion-radio>
+                                <ion-radio slot="start" [value]="option.value" />
                             </ion-item>
                         </ion-radio-group>
 
@@ -87,22 +79,19 @@
                             <ion-item *ngFor="let option of item.choices">
                                 <ion-label>
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
-                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId">
-                                    </core-format-text>
+                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </ion-label>
                                 <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
-                                    value="option.value">
-                                </ion-checkbox>
+                                    value="option.value" />
                             </ion-item>
                         </ng-container>
 
                         <ng-container *ngIf="item.templateName === 'captcha'">
                             <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey" [model]="item"
-                                modelValueName="value">
-                            </core-recaptcha>
+                                modelValueName="value" />
                             <div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card">
                                 <ion-item>
-                                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                                     <ion-label>{{ 'addon.mod_feedback.captchaofflinewarning' | translate }}</ion-label>
                                 </ion-item>
                             </div>
@@ -113,14 +102,14 @@
                 <ion-row class="ion-align-items-center spacer-top" *ngIf="!preview">
                     <ion-col *ngIf="hasPrevPage">
                         <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
-                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                             {{ 'core.previous' | translate }}
                         </ion-button>
                     </ion-col>
                     <ion-col *ngIf="hasNextPage">
                         <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
                             {{ 'core.next' | translate }}
-                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
                     <ion-col *ngIf="!hasNextPage">
@@ -134,7 +123,7 @@
 
         <ion-card class="core-success-card" *ngIf="completed">
             <ion-item class="ion-text-wrap">
-                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p *ngIf="!completionPageContents && !completedOffline">
                         {{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}
@@ -143,8 +132,7 @@
                         {{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}
                     </p>
                     <core-format-text *ngIf="completionPageContents" [component]="component" componentId="componentId"
-                        [text]="completionPageContents" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                    </core-format-text>
+                        [text]="completionPageContents" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ion-card>
@@ -153,7 +141,7 @@
             <div class="list-item-limited-width adaptable-buttons-row">
                 <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap ion-margin"
                     *ngIf="access!.canviewanalysis">
-                    <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true" />
                     {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
                 </ion-button>
                 <ion-button expand="block" (click)="continue()" class="ion-text-wrap ion-margin">
diff --git a/src/addons/mod/feedback/pages/index/index.html b/src/addons/mod/feedback/pages/index/index.html
index a0ca034af..109c1ed78 100644
--- a/src/addons/mod/feedback/pages/index/index.html
+++ b/src/addons/mod/feedback/pages/index/index.html
@@ -1,24 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <addon-mod-feedback-index [module]="module" [courseId]="courseId" [group]="selectedGroup" [tab]="selectedTab"
-        (dataRetrieved)="updateData($event)"></addon-mod-feedback-index>
+        (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
index fedb9bac9..7435c2342 100644
--- a/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_feedback.responses' |translate }}</h1>
@@ -10,13 +10,12 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshFeedback($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list class="ion-no-margin">
             <core-group-selector [groupInfo]="groupInfo" [(selected)]="selectedGroup" (selectedChange)="loadAttempts(selectedGroup)"
-                [courseId]="courseId">
-            </core-group-selector>
+                [courseId]="courseId" />
 
             <ion-item-divider>
                 <ion-label>
@@ -25,7 +24,7 @@
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
                 <ion-item *ngFor="let user of users" class="ion-text-wrap">
-                    <core-user-avatar [user]="user" slot="start"></core-user-avatar>
+                    <core-user-avatar [user]="user" slot="start" />
                     <ion-label>
                         <p class="item-heading">{{ user.fullname }}</p>
                         <p>
@@ -40,8 +39,7 @@
                 </ion-item>
             </ng-container>
 
-            <core-infinite-loading [enabled]="canLoadMore" (action)="loadAttempts(undefined, $event)" [error]="loadMoreError">
-            </core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="loadAttempts(undefined, $event)" [error]="loadMoreError" />
         </ion-list>
     </core-loading>
 </ion-content>
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 29e9b78e8..43ab829b3 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,28 +10,26 @@
 
     <!-- Activity info. -->
     <core-course-module-info *ngIf="!subfolder" [module]="module" [description]="description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId">
-    </core-course-module-info>
+        [componentId]="componentId" [courseId]="courseId" />
 
     <ion-list *ngIf="contents && (contents.files.length + contents.folders.length > 0)">
         <ng-container *ngFor="let folder of contents.folders">
             <ion-item class="ion-text-wrap item-file item-directory" (click)="openFolder(folder)" [detail]="true" button>
-                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
+                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate" />
                 <ion-label>
                     <p class="item-heading">{{folder.filename}}</p>
                 </ion-label>
             </ion-item>
         </ng-container>
         <ng-container *ngFor="let file of contents.files">
-            <core-file [file]="file" [component]="component" [componentId]="componentId"></core-file>
+            <core-file [file]="file" [component]="component" [componentId]="componentId" />
         </ng-container>
     </ion-list>
 
     <core-empty-box *ngIf="!contents || (contents.files.length + contents.folders.length === 0)" icon="far-folder-open"
-        [message]=" 'addon.mod_folder.emptyfilelist' | translate"></core-empty-box>
+        [message]=" 'addon.mod_folder.emptyfilelist' | translate" />
 
 </core-loading>
 
 <core-course-module-navigation collapsible-footer appearOnBottom *ngIf="!subfolder" [hidden]="showLoading" [courseId]="courseId"
-    [currentModuleId]="module.id" (completionChanged)="onCompletionChange()">
-</core-course-module-navigation>
+    [currentModuleId]="module.id" (completionChanged)="onCompletionChange()" />
diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html
index 0082579ce..5ab4f37a1 100644
--- a/src/addons/mod/folder/pages/index/index.html
+++ b/src/addons/mod/folder/pages/index/index.html
@@ -1,27 +1,23 @@
 <ion-header [collapsible]="!subfolder">
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="subfolder || activityComponent?.showLoading"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <addon-mod-folder-index [module]="module" [courseId]="courseId" [folderInstance]="folderInstance" [subfolder]="subfolder"
-        (dataRetrieved)="updateData($event)">
-    </addon-mod-folder-index>
+        (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
index e5ef8a551..cdeedac37 100644
--- a/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
+++ b/src/addons/mod/forum/components/discussion-options-menu/discussion-options-menu.html
@@ -1,39 +1,41 @@
 <ion-content>
     <ion-list>
-        <ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked" [detail]="false">
-            <ion-icon name="fas-lock" slot="start" aria-hidden="true"></ion-icon>
+        <ion-item button class="ion-text-wrap" (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked"
+            [detail]="false">
+            <ion-icon name="fas-lock" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.lockdiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
-        <ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked" [detail]="false">
-            <ion-icon name="fas-unlock" slot="start" aria-hidden="true"></ion-icon>
+        <ion-item button class="ion-text-wrap" (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked"
+            [detail]="false">
+            <ion-icon name="fas-unlock" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.unlockdiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned" [detail]="false">
-            <ion-icon name="fas-map-pin" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-map-pin" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.pindiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="setPinState(false)" *ngIf="canPin && discussion.pinned" [detail]="false">
-            <ion-icon name="fas-map-pin" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-map-pin" slot="start" class="icon-slash" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.unpindiscussion' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred"
             [detail]="false">
-            <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-star" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.addtofavourites' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred"
             [detail]="false">
-            <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-star" slot="start" class="icon-slash" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.mod_forum.removefromfavourites' | translate }}</p>
             </ion-label>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index 46e3f57ee..e2a0e5fe9 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -1,19 +1,19 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openSearch()" [attr.aria-label]="'core.search' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <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></core-context-menu>
+    <core-context-menu />
 </core-navbar-buttons>
 
 <!-- Content. -->
 <core-split-view>
     <ion-refresher slot="fixed" [disabled]="showLoading || (discussions && !discussions.loaded)" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="!showLoading && discussions && discussions.loaded">
@@ -29,13 +29,12 @@
         </core-course-module-info>
 
         <core-group-selector *ngIf="supportsChangeGroup" [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="groupChanged()"
-            [courseId]="courseId">
-        </core-group-selector>
+            [courseId]="courseId" />
 
         <!-- Cut-off date or due date message -->
         <ion-card class="core-info-card" *ngIf="availabilityMessage">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ availabilityMessage }}</ion-label>
             </ion-item>
         </ion-card>
@@ -43,7 +42,7 @@
         <!-- Q&A message. -->
         <ion-card class="core-info-card" *ngIf="showQAMessage">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_forum.qandanotify' | translate }}</ion-label>
             </ion-item>
         </ion-card>
@@ -51,7 +50,7 @@
         <!-- Cannot add discussion to group messages. -->
         <ion-card class="core-info-card" *ngIf="usesGroups && canAddDiscussion && !canAddDiscussionToGroup">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>
                     <span *ngIf="groupId <= 0">{{ 'addon.mod_forum.cannotadddiscussionall' | translate }}</span>
                     <span *ngIf="groupId > 0">{{ 'addon.mod_forum.cannotadddiscussion' | translate }}</span>
@@ -63,13 +62,11 @@
             <div *ngIf="discussions && sortingAvailable && selectedSortOrder" class="ion-text-wrap">
                 <core-combobox [modalOptions]="sortOrderSelectorModalOptions" listboxId="addon-mod-forum-sort-selector"
                     [label]="('core.sort' | translate)" (onChange)="setSortOrder($event)" [selection]="selectedSortOrder.label | translate"
-                    interface="modal">
-                </core-combobox>
+                    interface="modal" />
             </div>
 
             <core-empty-box *ngIf="!discussions || (!discussions.hasDiscussions && !errorLoadingDiscussions)" icon="far-comments"
-                [message]="'addon.mod_forum.forumnodiscussionsyet' | translate">
-            </core-empty-box>
+                [message]="'addon.mod_forum.forumnodiscussionsyet' | translate" />
 
             <core-empty-box *ngIf="errorLoadingDiscussions" icon="fas-triangle-exclamation"
                 [message]="'addon.mod_forum.errorloadingsortingorder' | translate">
@@ -82,33 +79,29 @@
                 <ion-label>
                     <p class="addon-mod-forum-discussion-title ion-text-wrap item-heading">
                         <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
-                            [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
+                            [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate" />
                         <ion-icon name="fas-star" class="addon-forum-star" *ngIf="discussion.starred"
-                            [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
+                            [attr.aria-label]="'addon.mod_forum.favourites' | translate" />
                         <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
-                            [courseId]="courseId">
-                        </core-format-text>
+                            [courseId]="courseId" />
                         <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
-                            [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
+                            [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate" />
                     </p>
                     <div class="addon-mod-forum-discussion-info">
                         <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId"
-                            [linkProfile]="false">
-                        </core-user-avatar>
+                            [linkProfile]="false" />
                         <div class="addon-mod-forum-discussion-author">
                             <span *ngIf="discussion.userfullname" class="core-discussionusername">{{discussion.userfullname}}</span>
                             <p *ngIf="discussion.groupname" class="core-groupname">
-                                <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate">
-                                </ion-icon>
+                                <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate" />
                                 <core-format-text [text]="discussion.groupname" contextLevel="course" [contextInstanceId]="courseId"
-                                    [wsNotFiltered]="true">
-                                </core-format-text>
+                                    [wsNotFiltered]="true" />
                             </p>
                             <p *ngIf="isOnlineDiscussion(discussion)">
                                 {{discussion.created * 1000 | coreFormatDate: "strftimerecentfull"}}
                             </p>
                             <p *ngIf="isOfflineDiscussion(discussion)">
-                                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-clock" aria-hidden="true" />
                                 {{ 'core.notsent' | translate }}
                             </p>
                         </div>
@@ -116,7 +109,7 @@
                     <ion-row *ngIf="isOnlineDiscussion(discussion)" class="ion-text-center addon-mod-forum-discussion-more-info">
                         <ion-col class="ion-text-start">
                             <ion-note>
-                                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'addon.mod_forum.lastpost' | translate }}
+                                <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'addon.mod_forum.lastpost' | translate }}
                                 <ng-container *ngIf="discussion.timemodified > discussion.created">
                                     {{ discussion.timemodified | coreTimeAgo }}
                                 </ng-container>
@@ -127,7 +120,7 @@
                         </ion-col>
                         <ion-col class="ion-text-end">
                             <ion-note>
-                                <ion-icon name="fas-comments" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-comments" aria-hidden="true" />
                                 {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
                                 <ion-badge *ngIf="discussion.numunread" class="ion-text-center">
                                     <span aria-hidden="true">{{ discussion.numunread }}</span>
@@ -141,23 +134,20 @@
                 </ion-label>
                 <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
                     [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)" slot="end">
-                    <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
-                    </ion-icon>
+                    <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-item>
 
             <core-infinite-loading [enabled]="discussions && discussions.loaded && !discussions.completed" [error]="fetchFailed"
-                (action)="fetchMoreDiscussions($event)">
-            </core-infinite-loading>
+                (action)="fetchMoreDiscussions($event)" />
         </ng-container>
     </core-loading>
 
-    <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-    </core-course-module-navigation>
+    <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id" />
 
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAddDiscussionToGroup">
         <ion-fab-button (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ addDiscussionText }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
index dcf9398b7..c5f594da8 100644
--- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
+++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html
@@ -2,13 +2,13 @@
     <core-loading [hideUntil]="loaded" [fullscreen]="false">
         <ion-list>
             <ion-item button class="ion-text-wrap" (click)="editPost()" *ngIf="offlinePost || canEdit" [detail]="false">
-                <ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-pen" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_forum.edit' | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item button class="ion-text-wrap" (click)="deletePost()" *ngIf="offlinePost || canDelete" [detail]="false">
-                <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading" *ngIf="!offlinePost">{{ 'addon.mod_forum.delete' | translate }}</p>
                     <p class="item-heading" *ngIf="offlinePost">{{ 'core.discard' | translate }}</p>
@@ -16,7 +16,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap" [href]="url" *ngIf="url" core-link capture="false" button [detail]="false"
                 [showBrowserWarning]="false">
-                <ion-icon name="fas-up-right-from-square" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ 'core.openinbrowser' | translate }}</p>
                 </ion-label>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 7c465b787..327984298 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -6,55 +6,48 @@
                     <div class="addon-mod-forum-post-title" *ngIf="displaySubject">
                         <h2 class="ion-text-wrap">
                             <ion-icon name="fas-map-pin" *ngIf="discussion && !post.parentid && discussion.pinned"
-                                [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate">
-                            </ion-icon>
+                                [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate" />
                             <ion-icon name="fas-star" class="addon-forum-star" [attr.aria-label]="'addon.mod_forum.favourites' | translate"
-                                *ngIf="discussion && !post.parentid && !discussion.pinned && discussion.starred">
-                            </ion-icon>
+                                *ngIf="discussion && !post.parentid && !discussion.pinned && discussion.starred" />
                             <core-format-text [text]="post.subject" contextLevel="module" [contextInstanceId]="forum && forum.cmid"
-                                [courseId]="courseId">
-                            </core-format-text>
+                                [courseId]="courseId" />
                         </h2>
                         <ion-note *ngIf="trackPosts && post.unread" class="ion-float-end ion-padding-start ion-text-end"
                             [attr.aria-label]="'addon.mod_forum.unread' | translate">
-                            <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-circle" color="primary" aria-hidden="true" />
                         </ion-note>
                         <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
                             (click)="showOptionsMenu($event)">
-                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
-                            </ion-icon>
+                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </div>
                     <div class="addon-mod-forum-post-info">
                         <core-user-avatar *ngIf="post.author && post.author.fullname" [user]="post.author" slot="start"
-                            [courseId]="courseId">
-                        </core-user-avatar>
+                            [courseId]="courseId" />
                         <div class="addon-mod-forum-post-author">
                             <span *ngIf="post.author && post.author.fullname" class="core-discussionusername">
                                 {{ post.author.fullname }}
                             </span>
                             <div *ngIf="post.author && post.author.groups">
                                 <p *ngFor="let group of post.author.groups" class="core-groupname">
-                                    <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate">
-                                    </ion-icon>
+                                    <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate" />
                                     <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId"
-                                        [wsNotFiltered]="true">
-                                    </core-format-text>
+                                        [wsNotFiltered]="true" />
                                 </p>
                             </div>
                             <p *ngIf="post.timecreated">{{post.timecreated * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
                             <p *ngIf="!post.timecreated">
-                                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
+                                <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'core.notsent' | translate }}
                             </p>
                         </div>
                         <ng-container *ngIf="!displaySubject">
                             <ion-note *ngIf="trackPosts && post.unread" class="ion-float-end ion-padding-start ion-text-end"
                                 [attr.aria-label]="'addon.mod_forum.unread' | translate">
-                                <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-circle" color="primary" aria-hidden="true" />
                             </ion-note>
                             <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
                                 (click)="showOptionsMenu($event)">
-                                <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
+                                <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                             </ion-button>
                         </ng-container>
                     </div>
@@ -66,37 +59,33 @@
                 <ion-note color="danger">{{ 'addon.mod_forum.postisprivatereply' | translate }}</ion-note>
             </div>
             <core-format-text [component]="component" [componentId]="componentId" [text]="post.message" contextLevel="module"
-                [contextInstanceId]="forum && forum.cmid" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="forum && forum.cmid" [courseId]="courseId" />
             <p *ngIf="post.haswordcount && post.wordcount">
                 <em>{{ 'core.numwords' | translate: {'$a': post.wordcount} }}</em>
             </p>
             <div *ngIf="post.attachments && post.attachments.length > 0">
-                <core-files [files]="post.attachments" [component]="component" [componentId]="componentId" showInline="true">
-                </core-files>
+                <core-files [files]="post.attachments" [component]="component" [componentId]="componentId" showInline="true" />
             </div>
         </ion-card-content>
         <div class="addon-mod-forum-post-more-info">
             <ion-item class="ion-text-wrap" *ngIf="tagsEnabled && post.tags && post.tags.length > 0">
                 <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
                 <ion-label>
-                    <core-tag-list [tags]="post.tags"></core-tag-list>
+                    <core-tag-list [tags]="post.tags" />
                 </ion-label>
             </ion-item>
             <core-rating-rate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId"
                 [itemId]="post.id" [itemSetId]="discussionId" [courseId]="courseId" [aggregateMethod]="forum.assessed"
-                [scaleId]="forum.scale" [userId]="post.author.id" (onUpdate)="ratingUpdated()">
-            </core-rating-rate>
+                [scaleId]="forum.scale" [userId]="post.author.id" (onUpdate)="ratingUpdated()" />
             <core-rating-aggregate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId"
-                [itemId]="post.id" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale">
-            </core-rating-aggregate>
+                [itemId]="post.id" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale" />
 
             <ion-item *ngIf="post.id > 0 && post.capabilities.reply && !post.isprivatereply"
                 class="ion-no-padding ion-text-end addon-forum-reply-button">
                 <ion-label>
                     <ion-button fill="clear" size="small" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId"
                         [attr.aria-expanded]="formData.replyingTo === post.id" (click)="showReplyForm($event)">
-                        <ion-icon name="fas-reply" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-reply" slot="start" aria-hidden="true" />
                         {{ 'addon.mod_forum.reply' | translate }}
                     </ion-button>
                 </ion-label>
@@ -107,37 +96,33 @@
     <form *ngIf="showForm" [id]="'addon-forum-reply-edit-form-' + uniqueId" #replyFormEl>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="formData.subject" name="subject">
-            </ion-input>
+            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="formData.subject" name="subject" />
         </ion-item>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
             <core-rich-text-editor elementId="message" contextLevel="module" [control]="messageControl"
                 [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + post.id" [component]="component"
                 [componentId]="componentId" [autoSave]="true" [contextInstanceId]="forum && forum.cmid"
-                [draftExtraParams]="{reply: post.id}" (contentChanged)="onMessageChange($event)">
-            </core-rich-text-editor>
+                [draftExtraParams]="{reply: post.id}" (contentChanged)="onMessageChange($event)" />
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="accessInfo.canpostprivatereply">
             <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
-            <ion-checkbox slot="end" [(ngModel)]="formData.isprivatereply" name="isprivatereply"></ion-checkbox>
+            <ion-checkbox slot="end" [(ngModel)]="formData.isprivatereply" name="isprivatereply" />
         </ion-item>
         <ng-container *ngIf="forum.id && forum.maxattachments > 0">
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" [detail]="false" [attr.aria-expanded]="advanced"
                 [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
                 <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                    class="expandable-status-icon"></ion-icon>
-                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
-                </ion-icon>
+                    class="expandable-status-icon" />
+                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon" />
                 <ion-label>
                     <h3 class="item-heading">{{ 'addon.mod_forum.advanced' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <div *ngIf="advanced" [id]="'addon-forum-reply-edit-form-advanced-' + uniqueId">
                 <core-attachments [files]="formData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
-                    [component]="component" [componentId]="forum.cmid" [allowOffline]="true" [courseId]="courseId">
-                </core-attachments>
+                    [component]="component" [componentId]="forum.cmid" [allowOffline]="true" [courseId]="courseId" />
             </div>
         </ng-container>
         <ion-grid>
diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
index 398a82327..77c0309ad 100644
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/addons/mod/forum/pages/discussion/discussion.html b/src/addons/mod/forum/pages/discussion/discussion.html
index 95385a60f..f64dfbc0e 100644
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@@ -1,72 +1,59 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="startingPost">
-                <core-format-text contextLevel="module" [text]="startingPost.subject" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text contextLevel="module" [text]="startingPost.subject" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The context menu will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <core-navbar-buttons slot="end">
     <core-context-menu>
         <core-context-menu-item *ngIf="discussionLoaded && !postHasOffline && isOnline" [priority]="650"
             [content]="'addon.mod_forum.refreshposts' | translate" [iconAction]="refreshIcon" [closeOnClick]="false"
-            (action)="doRefresh(null, $event)">
-        </core-context-menu-item>
+            (action)="doRefresh(null, $event)" />
         <core-context-menu-item *ngIf="discussionLoaded && isMobile && postHasOffline && isOnline" [priority]="550"
             [content]="'core.settings.synchronizenow' | translate" [iconAction]="syncIcon" [closeOnClick]="false"
-            (action)="doRefresh(null, $event, true)">
-        </core-context-menu-item>
+            (action)="doRefresh(null, $event, true)" />
         <core-context-menu-item [hidden]="sort === 'flat-oldest'" [priority]="500"
-            [content]="'addon.mod_forum.modeflatoldestfirst' | translate" iconAction="fas-arrow-down" (action)="changeSort('flat-oldest')">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.modeflatoldestfirst' | translate" iconAction="fas-arrow-down"
+            (action)="changeSort('flat-oldest')" />
         <core-context-menu-item [hidden]="sort === 'flat-newest'" [priority]="450"
-            [content]="'addon.mod_forum.modeflatnewestfirst' | translate" iconAction="fas-arrow-up" (action)="changeSort('flat-newest')">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.modeflatnewestfirst' | translate" iconAction="fas-arrow-up" (action)="changeSort('flat-newest')" />
         <core-context-menu-item [hidden]="sort === 'nested'" [priority]="400" [content]="'addon.mod_forum.modenested' | translate"
-            iconAction="fas-right-left" (action)="changeSort('nested')">
-        </core-context-menu-item>
+            iconAction="fas-right-left" (action)="changeSort('nested')" />
         <core-context-menu-item [hidden]="!discussion || !discussion.canlock || discussion.locked" [priority]="300"
-            [content]="'addon.mod_forum.lockdiscussion' | translate" iconAction="fas-lock" (action)="setLockState(true)">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.lockdiscussion' | translate" iconAction="fas-lock" (action)="setLockState(true)" />
         <core-context-menu-item [hidden]="!discussion || !discussion.canlock || !discussion.locked" [priority]="300"
-            [content]="'addon.mod_forum.unlockdiscussion' | translate" iconAction="fas-unlock" (action)="setLockState(false)">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.unlockdiscussion' | translate" iconAction="fas-unlock" (action)="setLockState(false)" />
         <core-context-menu-item [hidden]="!discussion || !canPin || discussion.pinned" [priority]="250"
-            [content]="'addon.mod_forum.pindiscussion' | translate" iconAction="fas-map-pin" (action)="setPinState(true)">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.pindiscussion' | translate" iconAction="fas-map-pin" (action)="setPinState(true)" />
         <core-context-menu-item [hidden]="!discussion || !canPin || !discussion.pinned" [priority]="250"
             [content]="'addon.mod_forum.unpindiscussion' | translate" [iconSlash]="true" iconAction="fas-map-pin"
-            (action)="setPinState(false)">
-        </core-context-menu-item>
+            (action)="setPinState(false)" />
         <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || discussion.starred" [priority]="200"
-            [content]="'addon.mod_forum.addtofavourites' | translate" iconAction="fas-star" (action)="toggleFavouriteState(true)">
-        </core-context-menu-item>
+            [content]="'addon.mod_forum.addtofavourites' | translate" iconAction="fas-star" (action)="toggleFavouriteState(true)" />
         <core-context-menu-item [hidden]="!discussion || !discussion.canfavourite || !discussion.starred" [priority]="200"
             [content]="'addon.mod_forum.removefromfavourites' | translate" iconAction="fas-star" [iconSlash]="true"
-            (action)="toggleFavouriteState(false)">
-        </core-context-menu-item>
+            (action)="toggleFavouriteState(false)" />
         <core-context-menu-item [hidden]="!externalUrl" [priority]="100" [content]="'core.openinbrowser' | translate" [href]="externalUrl"
-            iconAction="fas-up-right-from-square" [showBrowserWarning]="false"></core-context-menu-item>
+            iconAction="fas-up-right-from-square" [showBrowserWarning]="false" />
     </core-context-menu>
 </core-navbar-buttons>
 <ion-content [core-swipe-navigation]="discussions" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!discussionLoaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="discussionLoaded">
         <!-- Discussion replies found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="postHasOffline || hasOfflineRatings">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'core.hasdatatosync' | translate:{$a: discussionStr} }}</ion-label>
             </ion-item>
         </ion-card>
@@ -74,14 +61,14 @@
         <!-- Cut-off date or due date message -->
         <ion-card class="core-info-card" *ngIf="availabilityMessage">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ availabilityMessage }}</ion-label>
             </ion-item>
         </ion-card>
 
         <ion-card class="core-info-card" *ngIf="discussion && discussion.locked">
             <ion-item>
-                <ion-icon name="fas-lock" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-lock" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_forum.discussionlocked' | translate }}</ion-label>
             </ion-item>
         </ion-card>
@@ -89,7 +76,7 @@
         <!-- Q&A message. -->
         <ion-card class="core-info-card" *ngIf="showQAMessage">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_forum.qandanotify' | translate }}</ion-label>
             </ion-item>
         </ion-card>
@@ -98,24 +85,22 @@
             <addon-mod-forum-post [post]="startingPost" [discussion]="discussion" [courseId]="courseId" [highlight]="true"
                 [discussionId]="discussionId" [component]="component" [componentId]="cmId" [formData]="formData"
                 [originalData]="originalData" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
-            </addon-mod-forum-post>
+                [leavingPage]="leavingPage" (onPostChange)="postListChanged()" />
         </div>
 
         <ion-card *ngIf="sort !== 'nested' && posts.length">
             <ng-container *ngFor="let post of posts; first as first">
-                <core-spacer *ngIf="!first"></core-spacer>
+                <core-spacer *ngIf="!first" />
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
                     [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
                     [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
-                </addon-mod-forum-post>
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()" />
             </ng-container>
         </ion-card>
 
         <ng-container *ngIf="sort === 'nested' && posts.length">
             <ng-container *ngFor="let post of posts">
-                <ng-container *ngTemplateOutlet="nestedPosts; context: {post: post}"></ng-container>
+                <ng-container *ngTemplateOutlet="nestedPosts; context: {post: post}" />
             </ng-container>
         </ng-container>
 
@@ -124,12 +109,11 @@
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component"
                     [componentId]="cmId" [formData]="formData" [originalData]="originalData" [parentSubject]="postSubjects[post.parentid]"
                     [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo"
-                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()">
-                </addon-mod-forum-post>
+                    [leavingPage]="leavingPage" (onPostChange)="postListChanged()" />
             </ion-card>
             <div class="ion-padding-start" *ngIf="post.children && post.children.length && post.children[0].subject">
                 <ng-container *ngFor="let child of post.children">
-                    <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
+                    <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}" />
                 </ng-container>
             </div>
         </ng-template>
diff --git a/src/addons/mod/forum/pages/index/index.html b/src/addons/mod/forum/pages/index/index.html
index 0a1366b3d..7f85a8510 100644
--- a/src/addons/mod/forum/pages/index/index.html
+++ b/src/addons/mod/forum/pages/index/index.html
@@ -1,20 +1,17 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 
 <ion-content>
-    <addon-mod-forum-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-forum-index>
+    <addon-mod-forum-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index e13a19bf9..8d9bb72e3 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -1,41 +1,37 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_forum.addanewdiscussion' | translate }}</h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The context menu will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="discussions">
     <ion-refresher slot="fixed" [disabled]="!groupsLoaded" (ionRefresh)="refreshGroups($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="groupsLoaded">
         <form *ngIf="showForm" #newDiscFormEl>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
                 <ion-input [(ngModel)]="newDiscussion.subject" type="text" [placeholder]="'addon.mod_forum.subject' | translate"
-                    name="subject">
-                </ion-input>
+                    name="subject" />
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
                 <core-rich-text-editor name="addon_mod_forum_new_discussion" contextLevel="module" elementId="message"
                     [control]="messageControl" [placeholder]="'addon.mod_forum.message' | translate" [component]="component"
                     [componentId]="forum.cmid" [autoSave]="true" [contextInstanceId]="forum.cmid"
-                    (contentChanged)="onMessageChange($event)">
-                </core-rich-text-editor>
+                    (contentChanged)="onMessageChange($event)" />
             </ion-item>
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" [detail]="false" [attr.aria-expanded]="advanced"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                    [class.expandable-status-icon-expanded]="advanced"></ion-icon>
+                    [class.expandable-status-icon-expanded]="advanced" />
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
@@ -43,7 +39,7 @@
             <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
                 <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">
                     <ion-label>{{ 'addon.mod_forum.posttomygroups' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups" slot="end"></ion-toggle>
+                    <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups" slot="end" />
                 </ion-item>
                 <ion-item *ngIf="showGroups" class="core-edit-set-group">
                     <ion-label>{{ 'addon.mod_forum.group' | translate }}</ion-label>
@@ -52,29 +48,27 @@
                         [cancelText]="'core.cancel' | translate" (ionChange)="calculateGroupName()">
                         <ion-select-option *ngFor="let group of groups" [value]="group.id">
                             <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId"
-                                [wsNotFiltered]="true"></core-format-text>
+                                [wsNotFiltered]="true" />
                         </ion-select-option>
                     </ion-select>
                 </ion-item>
                 <ion-item>
                     <ion-label>{{ 'addon.mod_forum.discussionsubscription' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.subscribe" name="subscribe" slot="end"></ion-toggle>
+                    <ion-toggle [(ngModel)]="newDiscussion.subscribe" name="subscribe" slot="end" />
                 </ion-item>
                 <ion-item *ngIf="canPin">
                     <ion-label>{{ 'addon.mod_forum.discussionpinned' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin" slot="end"></ion-toggle>
+                    <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin" slot="end" />
                 </ion-item>
                 <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files"
                     [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid"
-                    [allowOffline]="true" [courseId]="courseId">
-                </core-attachments>
+                    [allowOffline]="true" [courseId]="courseId" />
             </div>
             <ion-item *ngIf="showGroups && postInGroupMessage && !newDiscussion.postToAllGroups" class="addon-forum-group-info">
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>
                     <core-format-text [text]="postInGroupMessage" contextLevel="course" [contextInstanceId]="courseId"
-                        [wsNotFiltered]="true">
-                    </core-format-text>
+                        [wsNotFiltered]="true" />
                 </ion-label>
             </ion-item>
             <ion-item class="addon-forum-new-discussion-buttons">
diff --git a/src/addons/mod/forum/pages/search/search.html b/src/addons/mod/forum/pages/search/search.html
index c33244429..18acb61ca 100644
--- a/src/addons/mod/forum/pages/search/search.html
+++ b/src/addons/mod/forum/pages/search/search.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="forum">{{ forum.name }}</h1>
@@ -13,25 +13,23 @@
     <div>
         <ion-card class="core-danger-card" *ngIf="searchBanner">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
-                    <core-format-text [text]="searchBanner"></core-format-text>
+                    <core-format-text [text]="searchBanner" />
                 </ion-label>
             </ion-item>
         </ion-card>
 
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'core.search' | translate"
-            [searchLabel]="'core.search' | translate" [autoFocus]="true" [searchArea]="searchAreaId"></core-search-box>
+            [searchLabel]="'core.search' | translate" [autoFocus]="true" [searchArea]="searchAreaId" />
 
         <ion-list *ngIf="resultsSource.isLoaded()">
             <core-search-global-search-result *ngFor="let result of resultsSource.getItems()" [result]="result" [showCourse]="false"
-                (onClick)="visitResult(result)">
-            </core-search-global-search-result>
+                (onClick)="visitResult(result)" />
         </ion-list>
 
         <core-infinite-loading [enabled]="resultsSource.isLoaded() && !resultsSource.isCompleted()" (action)="loadMoreResults($event)"
-            [error]="loadMoreError">
-        </core-infinite-loading>
+            [error]="loadMoreError" />
 
         <core-empty-box *ngIf="resultsSource.isEmpty()" icon="fas-magnifying-glass" [dimmed]="!resultsSource.isLoaded()">
             <p *ngIf="!resultsSource.isLoaded()">{{ 'core.search.empty' | translate }}</p>
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 ce3e456d5..fc3f19726 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
@@ -2,34 +2,32 @@
 <core-navbar-buttons slot="end">
     <ion-button *ngIf="!showLoading && glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
         [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
-        <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
     <ion-button *ngIf="!showLoading && glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
     <ion-button *ngIf="!showLoading" fill="clear" (click)="openModuleSummary()" aria-haspopup="true"
         [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
 <!-- Content. -->
 <core-split-view>
     <ion-refresher slot="fixed" [disabled]="showLoading" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-search-box *ngIf="isSearch" (onSubmit)="search($event)" [placeholder]="'addon.mod_glossary.searchquery' | translate"
-        [autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}">
-    </core-search-box>
+        [autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}" />
 
     <core-loading [hideUntil]="!showLoading">
         <!-- Activity info. -->
         <core-course-module-info *ngIf="!isSearch" [module]="module" [description]="description" [component]="component"
-            [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-        </core-course-module-info>
+            [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
         <ion-list *ngIf="!isSearch && entries && entries.offlineEntries.length > 0" class="addon-mod-glossary-index--offline-entries">
             <ion-item-divider>
@@ -41,10 +39,9 @@
                 [attr.aria-current]="entries.getItemAriaCurrent(entry)">
                 <ion-label>
                     <div class="addon-mod-glossary-index--offline-entry">
-                        <ion-icon name="fas-clock" class="ion-margin-end" [attr.aria-label]="'core.notsent' | translate"></ion-icon>
+                        <ion-icon name="fas-clock" class="ion-margin-end" [attr.aria-label]="'core.notsent' | translate" />
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
-                            [courseId]="courseId">
-                        </core-format-text>
+                            [courseId]="courseId" />
                     </div>
                 </ion-label>
             </ion-item>
@@ -61,28 +58,24 @@
                 <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)" [detail]="false">
                     <ion-label>
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
-                            [courseId]="courseId">
-                        </core-format-text>
+                            [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
             </ng-container>
         </ion-list>
 
         <core-empty-box *ngIf="(!entries || !entries.hasEntries) && (!isSearch || hasSearched)" icon="fas-list"
-            [message]="'addon.mod_glossary.noentriesfound' | translate">
-        </core-empty-box>
+            [message]="'addon.mod_glossary.noentriesfound' | translate" />
 
         <core-infinite-loading [enabled]="entries && !entries.completed && (!isSearch || hasSearched)" [error]="loadMoreError"
-            (action)="loadMoreEntries($event)">
-        </core-infinite-loading>
+            (action)="loadMoreEntries($event)" />
     </core-loading>
 
-    <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-    </core-course-module-navigation>
+    <core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id" />
 
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd && !showLoading">
         <ion-fab-button (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'addon.mod_glossary.addentry' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
index 881d44938..18f01efbd 100644
--- a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
+++ b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
@@ -2,7 +2,7 @@
     <ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()">
         <ion-item class="ion-text-wrap" *ngFor="let mode of modes">
             <ion-label>{{ mode.langkey | translate }}</ion-label>
-            <ion-radio slot="end" [value]="mode.key"></ion-radio>
+            <ion-radio slot="end" [value]="mode.key" />
         </ion-item>
     </ion-radio-group>
 </ion-content>
diff --git a/src/addons/mod/glossary/pages/edit/edit.html b/src/addons/mod/glossary/pages/edit/edit.html
index 0a4dc930a..220f2a46b 100644
--- a/src/addons/mod/glossary/pages/edit/edit.html
+++ b/src/addons/mod/glossary/pages/edit/edit.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="glossary">
-                <core-format-text [text]="glossary.name" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="glossary.name" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
@@ -16,16 +15,14 @@
         <form #editFormEl *ngIf="glossary">
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.concept' | translate }}</ion-label>
-                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="data.concept" name="concept">
-                </ion-input>
+                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="data.concept" name="concept" />
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.definition' | translate }}</ion-label>
                 <core-rich-text-editor [control]="definitionControl" (contentChanged)="onDefinitionChange($event)"
                     [placeholder]="'addon.mod_glossary.definition' | translate" name="addon_mod_glossary_edit" [component]="component"
                     [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId" elementId="definition_editor"
-                    [draftExtraParams]="editorExtraParams">
-                </core-rich-text-editor>
+                    [draftExtraParams]="editorExtraParams" />
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
                 <ion-label position="stacked">
@@ -43,8 +40,7 @@
                 <ion-label position="stacked">
                     {{ 'addon.mod_glossary.aliases' | translate }}
                 </ion-label>
-                <ion-textarea [(ngModel)]="data.aliases" rows="1" [core-auto-rows]="data.aliases" name="aliases">
-                </ion-textarea>
+                <ion-textarea [(ngModel)]="data.aliases" rows="1" [core-auto-rows]="data.aliases" name="aliases" />
             </ion-item>
             <ion-item-divider>
                 <ion-label>
@@ -52,8 +48,7 @@
                 </ion-label>
             </ion-item-divider>
             <core-attachments [files]="data.attachments" [component]="component" [componentId]="glossary.coursemodule" [allowOffline]="true"
-                [courseId]="courseId">
-            </core-attachments>
+                [courseId]="courseId" />
             <ng-container *ngIf="glossary.usedynalink">
                 <ion-item-divider>
                     <ion-label>
@@ -62,16 +57,15 @@
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="data.usedynalink" name="usedynalink" slot="end"></ion-toggle>
+                    <ion-toggle [(ngModel)]="data.usedynalink" name="usedynalink" slot="end" />
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>{{ 'addon.mod_glossary.casesensitive' | translate }}</ion-label>
-                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.casesensitive" name="casesensitive" slot="end">
-                    </ion-toggle>
+                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.casesensitive" name="casesensitive" slot="end" />
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>{{ 'addon.mod_glossary.fullmatch' | translate }}</ion-label>
-                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.fullmatch" name="fullmatch" slot="end"></ion-toggle>
+                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.fullmatch" name="fullmatch" slot="end" />
                 </ion-item>
             </ng-container>
             <ion-button class="ion-margin" expand="block" [disabled]="!data.concept || !data.definition" (click)="save()">
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index 3537ee410..072c8dd3f 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -1,36 +1,34 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="entry">
-                <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content [core-swipe-navigation]="entries" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="entry && loaded">
             <ion-card *ngIf="offlineEntry" class="core-warning-card">
                 <ion-item>
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'core.hasdatatosync' | translate: { $a: 'addon.mod_glossary.entry' | translate } }}</ion-label>
                 </ion-item>
             </ion-card>
             <ion-item class="ion-text-wrap" *ngIf="showAuthor">
-                <core-user-avatar [user]="entry" slot="start"></core-user-avatar>
+                <core-user-avatar [user]="entry" slot="start" />
                 <ion-label>
                     <h2>
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId"
-                            [courseId]="courseId">
-                        </core-format-text>
+                            [courseId]="courseId" />
                     </h2>
                     <p *ngIf="onlineEntry">{{ onlineEntry.userfullname }}</p>
                 </ion-label>
@@ -39,8 +37,7 @@
             <ion-item class="ion-text-wrap" *ngIf="!showAuthor">
                 <ion-label>
                     <p class="item-heading">
-                        <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId">
-                        </core-format-text>
+                        <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="componentId" />
                     </p>
                 </ion-label>
                 <ion-note slot="end" *ngIf="showDate && onlineEntry">{{ onlineEntry.timemodified | coreDateDayOrTime }}</ion-note>
@@ -48,38 +45,34 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="entry.definition" contextLevel="module"
-                        [contextInstanceId]="componentId" [courseId]="courseId">
-                    </core-format-text>
+                        [contextInstanceId]="componentId" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
             <div *ngIf="onlineEntry && onlineEntry.attachment">
-                <core-file *ngFor="let file of onlineEntry.attachments" [file]="file" [component]="component" [componentId]="componentId">
-                </core-file>
+                <core-file *ngFor="let file of onlineEntry.attachments" [file]="file" [component]="component" [componentId]="componentId" />
             </div>
             <div *ngIf="offlineEntry && offlineEntry.attachments">
                 <core-file *ngFor="let file of offlineEntry.attachments.online" [file]="file" [component]="component"
-                    [componentId]="componentId">
-                </core-file>
+                    [componentId]="componentId" />
             </div>
             <div *ngIf="offlineEntry && offlineEntryFiles">
-                <core-local-file *ngFor="let file of offlineEntryFiles" [file]="file">
-                </core-local-file>
+                <core-local-file *ngFor="let file of offlineEntryFiles" [file]="file" />
             </div>
             <ion-item class="ion-text-wrap" *ngIf="onlineEntry && tagsEnabled && entry && onlineEntry.tags && onlineEntry.tags.length > 0">
                 <ion-label>
                     <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
-                    <core-tag-list [tags]="onlineEntry.tags"></core-tag-list>
+                    <core-tag-list [tags]="onlineEntry.tags" />
                 </ion-label>
             </ion-item>
             <ion-item *ngIf="canDelete || canEdit">
                 <div slot="end">
                     <ion-button *ngIf="canDelete" fill="clear" color="danger" (click)="deleteEntry()"
                         [attr.aria-label]="'addon.mod_glossary.deleteentry' | translate">
-                        <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
                     </ion-button>
                     <ion-button *ngIf="canEdit" fill="clear" (click)="editEntry()"
                         [attr.aria-label]="'addon.mod_glossary.editentry' | translate">
-                        <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
                     </ion-button>
                 </div>
             </ion-item>
@@ -90,16 +83,13 @@
             </ion-item>
             <core-comments *ngIf="glossary && glossary.allowcomments && onlineEntry && onlineEntry.id > 0 && commentsEnabled"
                 contextLevel="module" [instanceId]="glossary.coursemodule" component="mod_glossary" [itemId]="onlineEntry.id"
-                area="glossary_entry" [courseId]="glossary.course" [showItem]="true">
-            </core-comments>
+                area="glossary_entry" [courseId]="glossary.course" [showItem]="true" />
             <core-rating-rate *ngIf="glossary && ratingInfo && onlineEntry" [ratingInfo]="ratingInfo" contextLevel="module"
                 [instanceId]="glossary.coursemodule" [itemId]="onlineEntry.id" [itemSetId]="0" [courseId]="glossary.course"
-                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()">
-            </core-rating-rate>
+                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" [userId]="entry.userid" (onUpdate)="ratingUpdated()" />
             <core-rating-aggregate *ngIf="glossary && ratingInfo && onlineEntry" [ratingInfo]="ratingInfo" contextLevel="module"
                 [instanceId]="glossary.coursemodule" [itemId]="onlineEntry.id" [courseId]="glossary.course"
-                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale">
-            </core-rating-aggregate>
+                [aggregateMethod]="glossary.assessed" [scaleId]="glossary.scale" />
         </ng-container>
 
         <ion-card *ngIf="!entry" class="core-warning-card">
diff --git a/src/addons/mod/glossary/pages/index/index.html b/src/addons/mod/glossary/pages/index/index.html
index 486a6fe89..76c548bdc 100644
--- a/src/addons/mod/glossary/pages/index/index.html
+++ b/src/addons/mod/glossary/pages/index/index.html
@@ -1,20 +1,16 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <addon-mod-glossary-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)">
-    </addon-mod-glossary-index>
+    <addon-mod-glossary-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 4786755f1..290364527 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
@@ -3,15 +3,13 @@
     <core-context-menu>
         <core-context-menu-item *ngIf="h5pActivity && h5pActivity.enabletracking && accessInfo && !accessInfo.canreviewattempts"
             [priority]="1000" [content]="'addon.mod_h5pactivity.attempts_report' | translate" (action)="viewMyAttempts()"
-            iconAction="fas-chart-bar">
-        </core-context-menu-item>
+            iconAction="fas-chart-bar" />
         <core-context-menu-item *ngIf="canViewAllAttempts" [priority]="1000" [content]="'addon.mod_h5pactivity.attempts_report' | translate"
-            (action)="viewAllAttempts()" iconAction="fas-chart-bar">
-        </core-context-menu-item>
+            (action)="viewAllAttempts()" iconAction="fas-chart-bar" />
     </core-context-menu>
 
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -20,13 +18,12 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <!-- Offline disabled. -->
     <ion-card class="core-warning-card" *ngIf="!siteCanDownload && playing">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }}
             </ion-label>
@@ -36,7 +33,7 @@
     <!-- Preview mode. -->
     <ion-card class="core-warning-card" *ngIf="accessInfo && !trackComponent">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'addon.mod_h5pactivity.previewmode' | translate }}
             </ion-label>
@@ -56,18 +53,16 @@
         <!-- Download progress. -->
         <ion-item class="ion-text-center" *ngIf="downloading">
             <ion-label>
-                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                 <p class="item-heading" *ngIf="progressMessage">{{ progressMessage | translate }}</p>
-                <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage"></core-progress-bar>
+                <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage" />
             </ion-label>
         </ion-item>
     </ion-list>
 
     <core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl"
         [trackComponent]="trackComponent" [contextId]="h5pActivity?.context" [enableInAppFullscreen]="true" [saveFreq]="saveFreq"
-        [state]="contentState">
-    </core-h5p-iframe>
+        [state]="contentState" />
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-</core-course-module-navigation>
+<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id" />
diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
index 70c8d9978..2551b8499 100644
--- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
+++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
@@ -1,27 +1,26 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="attempt">
             <!-- Attempt number and user that did the attempt. -->
             <ion-item class="ion-text-wrap" *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId"
                 [attr.aria-label]="user.fullname">
-                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
+                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false" />
                 <ion-label>
                     <p class="item-heading">{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</p>
                 </ion-label>
@@ -65,11 +64,11 @@
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_h5pactivity.outcome' | translate }}</p>
                             <p *ngIf="attempt.success !== null && attempt.success">
-                                <ion-icon name="fas-circle-check" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-circle-check" aria-hidden="true" />
                                 {{ 'addon.mod_h5pactivity.attempt_success_pass' | translate }}
                             </p>
                             <p *ngIf="attempt.success !== null && !attempt.success">
-                                <ion-icon name="far-circle" aria-hidden="true"></ion-icon>
+                                <ion-icon name="far-circle" aria-hidden="true" />
                                 {{ 'addon.mod_h5pactivity.attempt_success_fail' | translate }}
                             </p>
                             <p *ngIf="attempt.success === null">
@@ -92,15 +91,13 @@
                     <ion-card-header class="ion-text-wrap">
                         <ion-card-title>
                             <core-format-text [text]="result.description" [component]="component" [componentId]="cmId" contextLevel="module"
-                                [contextInstanceId]="cmId" [courseId]="courseId">
-                            </core-format-text>
+                                [contextInstanceId]="cmId" [courseId]="courseId" />
                         </ion-card-title>
                     </ion-card-header>
                     <ion-item *ngIf="result.content" class="ion-text-wrap">
                         <ion-label>
                             <core-format-text [text]="result.content" [component]="component" [componentId]="cmId" contextLevel="module"
-                                [contextInstanceId]="cmId" [courseId]="courseId">
-                            </core-format-text>
+                                [contextInstanceId]="cmId" [courseId]="courseId" />
                         </ion-label>
                     </ion-item>
 
@@ -120,19 +117,16 @@
                                 <ion-row class="ion-align-items-center">
                                     <ion-col class="ion-text-start">
                                         <core-format-text [text]="option.description" [component]="component" [componentId]="cmId"
-                                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
                                     </ion-col>
                                     <ion-col class="ion-text-center">
                                         <ng-container *ngIf="option.correctanswer">
-                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}">
-                                            </ng-container>
+                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}" />
                                         </ng-container>
                                     </ion-col>
                                     <ion-col class="ion-text-center">
                                         <ng-container *ngIf="option.useranswer">
-                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.useranswer}">
-                                            </ng-container>
+                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.useranswer}" />
                                         </ng-container>
                                     </ion-col>
                                 </ion-row>
@@ -152,7 +146,7 @@
 
                     <!-- Result doesn't support tracking. -->
                     <ion-item class="ion-text-wrap core-warning-item" *ngIf="!result.track">
-                        <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true" />
                         <ion-label>
                             {{ 'addon.mod_h5pactivity.no_compatible_track' | translate:{$a: result.interactiontype} }}
                         </ion-label>
@@ -166,28 +160,23 @@
 <!-- Template to render an answer. -->
 <ng-template #answerTemplate let-answer="answer">
     <p *ngIf="answer.correct">
-        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_correct' | translate" color="success">
-        </ion-icon>
+        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_correct' | translate" color="success" />
         {{ answer.answer }}
     </p>
     <p *ngIf="answer.incorrect">
-        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_incorrect' | translate" color="danger">
-        </ion-icon>
+        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_incorrect' | translate" color="danger" />
         {{ answer.answer }}
     </p>
     <p *ngIf="answer.text">
         {{ answer.answer }}
     </p>
     <p *ngIf="answer.checked">
-        <ion-icon name="fas-circle-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_checked' | translate">
-        </ion-icon>
+        <ion-icon name="fas-circle-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_checked' | translate" />
     </p>
     <p *ngIf="answer.pass">
-        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_pass' | translate" color="success">
-        </ion-icon>
+        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_pass' | translate" color="success" />
     </p>
     <p *ngIf="answer.fail">
-        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_fail' | translate" color="danger">
-        </ion-icon>
+        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_fail' | translate" color="danger" />
     </p>
 </ng-template>
diff --git a/src/addons/mod/h5pactivity/pages/index/index.html b/src/addons/mod/h5pactivity/pages/index/index.html
index f3633f9a3..8fd1be5bf 100644
--- a/src/addons/mod/h5pactivity/pages/index/index.html
+++ b/src/addons/mod/h5pactivity/pages/index/index.html
@@ -1,26 +1,22 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <addon-mod-h5pactivity-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"
-        (onActivityFinish)="setCanleaveSafely($event)">
-    </addon-mod-h5pactivity-index>
+        (onActivityFinish)="setCanleaveSafely($event)" />
 </ion-content>
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index 2570a5a1a..6b50b17d3 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -1,32 +1,31 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <!-- User viewed. -->
         <ion-item class="ion-text-wrap" *ngIf="user && !isCurrentUser" core-user-link [userId]="user.id" [courseId]="courseId"
             [attr.aria-label]="user.fullname" button [detail]="true">
-            <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false" />
             <ion-label>
                 <h2>{{ user.fullname }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="user && isCurrentUser">
-            <core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
+            <core-user-avatar [user]="user" slot="start" [courseId]="courseId" />
             <ion-label>
                 <h2>{{ 'addon.mod_h5pactivity.myattempts' | translate }}</h2>
             </ion-label>
@@ -40,8 +39,7 @@
                         <h3 class="item-heading">{{ attemptsData.scored.title }}</h3>
                     </ion-label>
                 </ion-item-divider>
-                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.scored.attempts}">
-                </ng-container>
+                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.scored.attempts}" />
             </ng-container>
 
             <!-- All attempts. -->
@@ -51,14 +49,13 @@
                         <h3 class="item-heading">{{ 'addon.mod_h5pactivity.all_attempts' | translate }}</h3>
                     </ion-label>
                 </ion-item-divider>
-                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.attempts}"></ng-container>
+                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.attempts}" />
             </ng-container>
         </ion-list>
 
         <!-- No attempts. -->
         <core-empty-box *ngIf="attemptsData && (!attemptsData.attempts || !attemptsData.attempts.length)" icon="fas-chart-bar"
-            [message]="'addon.mod_h5pactivity.attempts_none' | translate">
-        </core-empty-box>
+            [message]="'addon.mod_h5pactivity.attempts_none' | translate" />
     </core-loading>
 </ion-content>
 
@@ -102,11 +99,9 @@
                 </ion-col>
                 <ion-col class="ion-text-center addon-mod_h5pactivity-table-success-col">
                     <ion-icon *ngIf="attempt.success !== null && attempt.success" name="fas-circle-check"
-                        [attr.aria-label]="'addon.mod_h5pactivity.attempt_success_pass' | translate">
-                    </ion-icon>
+                        [attr.aria-label]="'addon.mod_h5pactivity.attempt_success_pass' | translate" />
                     <ion-icon *ngIf="attempt.success !== null && !attempt.success" name="far-circle"
-                        [attr.aria-label]="'addon.mod_h5pactivity.attempt_success_fail' | translate">
-                    </ion-icon>
+                        [attr.aria-label]="'addon.mod_h5pactivity.attempt_success_fail' | translate" />
                     <img *ngIf="attempt.success === null" src="assets/img/icons/empty.svg"
                         [alt]="'addon.mod_h5pactivity.attempt_success_unknown' | translate">
                 </ion-col>
diff --git a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
index 8d3118bf5..51842f421 100644
--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html
@@ -1,20 +1,19 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
-                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="users.length">
@@ -39,7 +38,7 @@
                     <ion-row class="ion-align-items-center">
                         <ion-col class="ion-text-center" size="4">
                             <p>
-                                <core-user-avatar [user]="user.user" [courseId]="courseId"></core-user-avatar>
+                                <core-user-avatar [user]="user.user" [courseId]="courseId" />
                             </p>
                             {{ user.user.fullname }}
                         </ion-col>
@@ -65,10 +64,8 @@
 
         <!-- No attempts. -->
         <core-empty-box *ngIf="!users.length && !canLoadMore" icon="fas-chart-bar"
-            [message]="'addon.mod_h5pactivity.noparticipants' | translate">
-        </core-empty-box>
+            [message]="'addon.mod_h5pactivity.noparticipants' | translate" />
 
-        <core-infinite-loading [enabled]="loaded && canLoadMore" [error]="fetchMoreUsersFailed" (action)="fetchMoreUsers($event)">
-        </core-infinite-loading>
+        <core-infinite-loading [enabled]="loaded && canLoadMore" [error]="fetchMoreUsersFailed" (action)="fetchMoreUsers($event)" />
     </core-loading>
 </ion-content>
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 f483981b8..519c2f619 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,8 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <ion-list>
         <ion-item>
@@ -38,7 +37,6 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index cc4be9163..c8251314d 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/addons/mod/imscp/pages/index/index.html b/src/addons/mod/imscp/pages/index/index.html
index 1ecc39a45..f4d83f8fc 100644
--- a/src/addons/mod/imscp/pages/index/index.html
+++ b/src/addons/mod/imscp/pages/index/index.html
@@ -1,20 +1,17 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
-    <addon-mod-imscp-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-imscp-index>
+    <addon-mod-imscp-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/imscp/pages/view/view.html b/src/addons/mod/imscp/pages/view/view.html
index b2f8e3329..f272a3b8f 100644
--- a/src/addons/mod/imscp/pages/view/view.html
+++ b/src/addons/mod/imscp/pages/view/view.html
@@ -1,18 +1,17 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
 
         <ion-buttons slot="end">
             <ion-button *ngIf="loaded" (click)="showToc()" aria-haspopup="true" [attr.aria-label]="'addon.mod_imscp.toc' | translate">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -23,15 +22,14 @@
 
         <ion-card class="core-warning-card" *ngIf="warning">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label><span [innerHTML]="warning"></span></ion-label>
             </ion-item>
         </ion-card>
 
-        <core-iframe *ngIf="loaded" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true"></core-iframe>
+        <core-iframe *ngIf="loaded" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true" />
     </core-loading>
 
     <core-navigation-bar collapsible-footer appearOnBottom *ngIf="loaded && navigationItems.length > 1" [items]="navigationItems"
-        (action)="loadItem($event)">
-    </core-navigation-bar>
+        (action)="loadItem($event)" />
 </ion-content>
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 6b0aea98b..4dd254e12 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,8 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <core-tabs [hideUntil]="!showLoading" [selectedIndex]="selectedTab">
         <!-- Index/Preview tab. -->
@@ -20,8 +19,8 @@
                 <!-- Prevent access messages. Only show the first one. -->
                 <ion-card class="core-info-card" *ngIf="lesson && preventReasons.length">
                     <ion-item>
-                        <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
-                        <ion-label [innerHTML]="preventReasons[0].message"></ion-label>
+                        <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
+                        <ion-label [innerHTML]="preventReasons[0].message" />
                     </ion-item>
                 </ion-card>
 
@@ -32,8 +31,7 @@
                             <ion-label position="stacked">{{ 'addon.mod_lesson.enterpassword' | translate }}</ion-label>
                             <core-show-password name="password">
                                 <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                                    core-auto-focus #passwordinput [clearOnEdit]="false">
-                                </ion-input>
+                                    core-auto-focus #passwordinput [clearOnEdit]="false" />
                             </core-show-password>
                         </ion-item>
                         <ion-button expand="block" type="submit">
@@ -46,7 +44,7 @@
 
                 <core-loading [hideUntil]="!showSpinner" *ngIf="canViewReports">
                     <ion-list *ngIf="(lesson && !preventReasons.length) || retakeToReview">
-                        <ng-container *ngTemplateOutlet="buttons"></ng-container>
+                        <ng-container *ngTemplateOutlet="buttons" />
                     </ion-list>
                 </core-loading>
             </ng-template>
@@ -57,17 +55,15 @@
             <ng-template>
                 <core-loading [hideUntil]="reportLoaded">
                     <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"
-                        [courseId]="courseId">
-                    </core-group-selector>
+                        [courseId]="courseId" />
 
                     <!-- No lesson retakes. -->
                     <core-empty-box *ngIf="lesson && !overview && selectedGroupEmptyMessage" icon="fas-chart-bar">
                         <core-format-text [text]="selectedGroupEmptyMessage" contextLevel="course" [contextInstanceId]="courseId"
-                            [wsNotFiltered]="true"></core-format-text>
+                            [wsNotFiltered]="true" />
                     </core-empty-box>
                     <core-empty-box *ngIf="!overview && !selectedGroupEmptyMessage" icon="fas-chart-bar"
-                        [message]="'addon.mod_lesson.nolessonattempts' | translate">
-                    </core-empty-box>
+                        [message]="'addon.mod_lesson.nolessonattempts' | translate" />
 
                     <!-- General statistics for the current group. -->
                     <ion-card class="addon-mod_lesson-lessonstats" *ngIf="overview">
@@ -185,12 +181,10 @@
 
                         <ion-item class="ion-text-wrap" *ngFor="let student of overview.students" button (click)="openRetake(student.id)"
                             [detail]="true">
-                            <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
-                            </core-user-avatar>
+                            <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" />
                             <ion-label>
                                 <p class="item-heading">{{ student.fullname }}</p>
-                                <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade">
-                                </core-progress-bar>
+                                <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade" />
                             </ion-label>
                         </ion-item>
                     </ion-card>
@@ -201,11 +195,10 @@
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width" *ngIf="!canViewReports && ((lesson && !preventReasons.length) || retakeToReview)">
-            <ng-container *ngTemplateOutlet="buttons"></ng-container>
+            <ng-container *ngTemplateOutlet="buttons" />
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
 
@@ -246,7 +239,7 @@
         <ng-container *ngIf="leftDuringTimed && lesson.timelimit && lesson.retake && !finishedOffline">
             <ion-item class="ion-text-wrap">
                 <!-- User left during the session with time limit and retakes allowed, ask to continue. -->
-                <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimed' | translate"></ion-label>
+                <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimed' | translate" />
             </ion-item>
             <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="start(false)">
                 {{ 'addon.mod_lesson.continue' | translate }}
@@ -256,7 +249,7 @@
         <ion-item class="ion-text-wrap" *ngIf="leftDuringTimed && lesson.timelimit && !lesson.retake">
             <!-- User left during the session with time limit and retakes not allowed.
                 This should be handled by preventMessages. -->
-            <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimednoretake' | translate"></ion-label>
+            <ion-label [innerHTML]="'addon.mod_lesson.leftduringtimednoretake' | translate" />
         </ion-item>
 
         <ng-container *ngIf="!leftDuringTimed && !finishedOffline">
@@ -265,7 +258,7 @@
                 {{ 'core.start' | translate }}
             </ion-button>
             <ion-button class="ion-text-wrap ion-margin" expand="block" fill="outline" *ngIf="canManage" (click)="start(false)">
-                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                 {{ 'addon.mod_lesson.preview' | translate }}
             </ion-button>
         </ng-container>
diff --git a/src/addons/mod/lesson/components/menu-modal/menu-modal.html b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
index f3d22c084..f0498afd9 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -21,8 +21,7 @@
                     </ion-label>
                 </ion-item-divider>
                 <core-file [file]="pageInstance.mediaFile" [component]="pageInstance.component"
-                    [componentId]="pageInstance.lesson?.coursemodule">
-                </core-file>
+                    [componentId]="pageInstance.lesson?.coursemodule" />
             </ng-container>
 
             <!-- Lesson menu. -->
@@ -34,7 +33,7 @@
                 </ion-item-divider>
                 <ion-item class="ion-text-center" *ngIf="pageInstance.loadingMenu">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
                 <div *ngIf="!pageInstance.loadingMenu">
@@ -44,8 +43,7 @@
                             [detail]="true">
                             <ion-label>
                                 <core-format-text [text]="page.title" contextLevel="module" [courseId]="pageInstance.courseId"
-                                    [contextInstanceId]="pageInstance.lesson?.coursemodule">
-                                </core-format-text>
+                                    [contextInstanceId]="pageInstance.lesson?.coursemodule" />
                             </ion-label>
                         </ion-item>
                     </ng-container>
diff --git a/src/addons/mod/lesson/pages/index/index.html b/src/addons/mod/lesson/pages/index/index.html
index 2b4c25520..b784a7446 100644
--- a/src/addons/mod/lesson/pages/index/index.html
+++ b/src/addons/mod/lesson/pages/index/index.html
@@ -1,24 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-lesson-index [module]="module" [courseId]="courseId" [group]="group" [action]="action" (dataRetrieved)="updateData($event)">
-    </addon-mod-lesson-index>
+    <addon-mod-lesson-index [module]="module" [courseId]="courseId" [group]="group" [action]="action"
+        (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 88d8a8784..edca7531d 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -1,18 +1,17 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate"
                 (click)="showMenu()">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -22,7 +21,7 @@
         <!-- Info messages. Only show the first one. -->
         <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
             <ion-item class="ion-text-wrap">
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ messages[0].message }}</ion-label>
             </ion-item>
         </ion-card>
@@ -31,8 +30,7 @@
             [ngStyle]="{'width': lessonWidth, 'height': lessonHeight}">
 
             <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timeLeftClassThreshold]="-1"
-                [timerText]="'addon.mod_lesson.timeremaining' | translate">
-            </core-timer>
+                [timerText]="'addon.mod_lesson.timeremaining' | translate" />
 
             <!-- Retake and ongoing score. -->
             <ion-item class="ion-text-wrap" *ngIf="showRetake && !eolData && !processData">
@@ -51,8 +49,7 @@
                 <ion-item class="ion-text-wrap" *ngIf="!question && pageContent">
                     <ion-label>
                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
-                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                        </core-format-text>
+                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
 
@@ -64,8 +61,7 @@
                         <ion-label>
                             <h2>
                                 <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
-                                    contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                                </core-format-text>
+                                    contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                             </h2>
                         </ion-label>
                     </ion-item-divider>
@@ -75,11 +71,10 @@
 
                         <!-- Short answer. -->
                         <ion-item class="ion-text-wrap" *ngSwitchCase="'shortanswer'">
-                            <ion-label class="sr-only" stacked></ion-label>
+                            <ion-label class="sr-only" stacked />
                             <ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                 [id]="question.input!.id" [formControlName]="question.input!.name" autocorrect="off"
-                                [maxlength]="question.input!.maxlength">
-                            </ion-input>
+                                [maxlength]="question.input!.maxlength" />
                         </ion-item>
 
                         <!-- Essay. -->
@@ -89,8 +84,7 @@
                                 <core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                     [control]="question.control" [component]="component" [componentId]="lesson.coursemodule"
                                     [autoSave]="true" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
-                                    elementId="answer_editor">
-                                </core-rich-text-editor>
+                                    elementId="answer_editor" />
                             </ion-item>
                             <ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
                                 <ion-label>
@@ -98,8 +92,7 @@
                                     <p>
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                             [text]="question.useranswer" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
-                                            [courseId]="courseId">
-                                        </core-format-text>
+                                            [courseId]="courseId" />
                                     </p>
                                 </ion-label>
                             </ion-item>
@@ -112,11 +105,9 @@
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                     <ion-label>
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
-                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                     </ion-label>
-                                    <ion-radio slot="end" [id]="option.id" [value]="option.value" [disabled]="option.disabled">
-                                    </ion-radio>
+                                    <ion-radio slot="end" [id]="option.id" [value]="option.value" [disabled]="option.disabled" />
                                 </ion-item>
                             </ion-radio-group>
 
@@ -125,10 +116,9 @@
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                     <ion-label>
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
-                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                     </ion-label>
-                                    <ion-checkbox [id]="option.id" [formControlName]="option.name" slot="end"></ion-checkbox>
+                                    <ion-checkbox [id]="option.id" [formControlName]="option.name" slot="end" />
                                 </ion-item>
                             </ng-container>
                         </ng-container>
@@ -139,8 +129,7 @@
                                 <ion-label>
                                     <p>
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="row.text"
-                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                     </p>
                                 </ion-label>
                                 <ion-select [id]="row.id" [formControlName]="row.name" [cancelText]="'core.cancel' | translate"
@@ -178,13 +167,12 @@
                         <span id="addon-mod_lesson-{{cmId}}-progress">
                             {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}
                         </span>
-                        <core-progress-bar [progress]="pageData.progress" ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress">
-                        </core-progress-bar>
+                        <core-progress-bar [progress]="pageData.progress" ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress" />
                     </ion-label>
                 </ion-item>
                 <ion-card class="core-info-card" *ngIf="lesson.progressbar && canManage">
                     <ion-item class="ion-text-wrap">
-                        <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                         <ion-label>{{ 'addon.mod_lesson.progressbarteacherwarning2' | translate }}</ion-label>
                     </ion-item>
                 </ion-card>
@@ -193,7 +181,7 @@
             <!-- End of lesson reached. -->
             <ion-card class="core-warning-card" *ngIf="eolData && !processData && eolData.offline?.value">
                 <ion-item>
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'addon.mod_lesson.finishretakeoffline' | translate }}</ion-label>
                 </ion-item>
             </ion-card>
@@ -216,7 +204,7 @@
                     <ion-label>{{ eolData.numberofcorrectanswers.message }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayscorewithessays">
-                    <ion-label [innerHTML]="eolData.displayscorewithessays.message"></ion-label>
+                    <ion-label [innerHTML]="eolData.displayscorewithessays.message" />
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays">
                     <ion-label>{{ eolData.displayscorewithoutessays.message }}</ion-label>
@@ -236,8 +224,7 @@
                             {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
                         </span>
                         <core-progress-bar [progress]="eolData.progresscompleted.value"
-                            ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress-end">
-                        </core-progress-bar>
+                            ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress-end" />
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
@@ -254,15 +241,13 @@
                 <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [href]="activityLink.href"
                     core-link [capture]="true" class="ion-text-wrap ion-margin button-no-uppercase">
                     <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </ion-button>
                 <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted">
                     <!-- Activity link wasn't formatted, render the original link. -->
                     <ion-label>
                         <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
-                            [courseId]="courseId">
-                        </core-format-text>
+                            [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
             </ion-card>
@@ -276,8 +261,7 @@
                     <ion-label>
                         <div *ngIf="!processData.reviewmode">
                             <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="processData.feedback"
-                                contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
-                            </core-format-text>
+                                contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                         </div>
                         <div *ngIf="review">
                             <p>{{ 'addon.mod_lesson.gotoendoflesson' | translate }}</p>
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index a787489d8..a105b835a 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_lesson.detailedstats' | translate }}</h1>
@@ -10,18 +10,17 @@
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
         <div *ngIf="student">
             <!-- Student data. -->
             <ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
-                <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" [linkProfile]="false">
-                </core-user-avatar>
+                <core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" [linkProfile]="false" />
                 <ion-label>
                     <h2>{{student.fullname}}</h2>
-                    <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade"></core-progress-bar>
+                    <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade" />
                 </ion-label>
             </ion-item>
 
@@ -89,8 +88,7 @@
                             <p>
                                 <core-format-text [component]="component" [componentId]="lesson?.coursemodule" collapsible-item
                                     [text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                    [courseId]="courseId">
-                                </core-format-text>
+                                    [courseId]="courseId" />
                             </p>
                         </ion-label>
                     </ion-item>
@@ -135,21 +133,18 @@
                                         <p>
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[0].content" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                                [courseId]="courseId">
-                                            </core-format-text>
+                                                [courseId]="courseId" />
                                         </p>
                                         <ion-badge *ngIf="answer[1]" color="dark" class="addon-mod_lesson-answer-stats">
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                                [courseId]="courseId">
-                                            </core-format-text>
+                                                [courseId]="courseId" />
                                         </ion-badge>
                                         <ion-badge *ngIf="answer[0].successBadge" color="success" class="addon-mod_lesson-answer-success">
                                             {{ answer[0].successBadge }}
                                         </ion-badge>
                                     </ion-label>
-                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end">
-                                    </ion-checkbox>
+                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end" />
                                 </ion-item>
 
                                 <!-- Short answer or numeric. -->
@@ -159,8 +154,7 @@
                                         <ion-badge *ngIf="answer[1]" color="dark">
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                                [courseId]="courseId">
-                                            </core-format-text>
+                                                [courseId]="courseId" />
                                         </ion-badge>
                                     </ion-label>
                                 </ion-item>
@@ -174,8 +168,7 @@
                                                     <p>
                                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                             [text]=" answer[0].content" contextLevel="module"
-                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                                        </core-format-text>
+                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
                                                     </p>
                                                 </ion-col>
                                                 <ion-col>
@@ -183,8 +176,7 @@
                                                     <ion-badge *ngIf="answer[1]" color="dark">
                                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                             [text]="answer[1]" contextLevel="module"
-                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                                        </core-format-text>
+                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
                                                     </ion-badge>
                                                 </ion-col>
                                             </ion-row>
@@ -198,14 +190,12 @@
                                         <p>
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[0]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                                [courseId]="courseId">
-                                            </core-format-text>
+                                                [courseId]="courseId" />
                                         </p>
                                         <ion-badge *ngIf="answer[1]" color="dark">
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                                [courseId]="courseId">
-                                            </core-format-text>
+                                                [courseId]="courseId" />
                                         </ion-badge>
                                     </ion-label>
                                 </ion-item>
@@ -216,13 +206,11 @@
                                 <ion-label>
                                     <p>
                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="answer[0]"
-                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
                                     </p>
                                     <ion-badge *ngIf="answer[1]" color="dark">
                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="answer[1]"
-                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                        </core-format-text>
+                                            contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
                                     </ion-badge>
                                 </ion-label>
                             </ion-item>
@@ -234,8 +222,7 @@
                                 <p>
                                     <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                         [text]="page.answerdata.response" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
-                                        [courseId]="courseId">
-                                    </core-format-text>
+                                        [courseId]="courseId" />
                                 </p>
                             </ion-label>
                         </ion-item>
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 70a72d2c6..fbfb8a94a 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,18 +10,16 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width">
             <ion-button expand="block" (click)="launch()" class="ion-margin ion-text-wrap">
                 {{ 'addon.mod_lti.launchactivity' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/lti/pages/index/index.html b/src/addons/mod/lti/pages/index/index.html
index 566f57401..a981475bc 100644
--- a/src/addons/mod/lti/pages/index/index.html
+++ b/src/addons/mod/lti/pages/index/index.html
@@ -1,24 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-lti-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-lti-index>
+    <addon-mod-lti-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 0a03ba6ab..dddc42495 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,20 +10,18 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <ion-card class="core-warning-card" *ngIf="warning">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label><span [innerHTML]="warning"></span></ion-label>
         </ion-item>
     </ion-card>
 
     <div class="ion-padding">
         <core-format-text [component]="component" [componentId]="componentId" [text]="contents" contextLevel="module"
-            [contextInstanceId]="module.id" [courseId]="courseId">
-        </core-format-text>
+            [contextInstanceId]="module.id" [courseId]="courseId" />
 
         <p class="ion-padding-bottom addon-mod_page-timemodified" *ngIf="displayTimemodified && timemodified">
             {{ 'core.lastmodified' | translate}}: {{ timemodified! * 1000 | coreFormatDate }}
@@ -32,5 +30,5 @@
 
 </core-loading>
 
-<core-course-module-navigation collapsible-footer appearOnBottom [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-</core-course-module-navigation>
+<core-course-module-navigation collapsible-footer appearOnBottom [hidden]="showLoading" [courseId]="courseId"
+    [currentModuleId]="module.id" />
diff --git a/src/addons/mod/page/pages/index/index.html b/src/addons/mod/page/pages/index/index.html
index 013f28a4d..b8949ac8e 100644
--- a/src/addons/mod/page/pages/index/index.html
+++ b/src/addons/mod/page/pages/index/index.html
@@ -1,24 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-page-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)">
-    </addon-mod-page-index>
+    <addon-mod-page-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
index ed53f0e8e..6ac16c283 100644
--- a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
+++ b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
@@ -8,7 +8,6 @@
     <ion-label class="sr-only">{{ 'addon.mod_quiz.quizpassword' | translate }}</ion-label>
     <core-show-password [name]="'quizpassword'">
         <ion-input id="addon-mod_quiz-accessrule-password-input" name="quizpassword" type="password"
-            placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false">
-        </ion-input>
+            placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false" />
     </core-show-password>
 </ion-item>
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 a484ac79e..b3bc4b6fa 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,8 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="buttonText && hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="buttonText && hasOffline" (completionChanged)="onCompletionChange()" />
 
     <!-- Access rules description messages. -->
     <ion-card *ngIf="gradeMethodReadable || accessRules.length || syncTime">
@@ -116,8 +115,7 @@
                     <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">
-                        </core-format-text>
+                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -126,8 +124,7 @@
                     <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">
-                        </core-format-text>
+                            [contextInstanceId]="module.id" [courseId]="courseId" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -200,7 +197,7 @@
             <!-- Button to start/continue. -->
             <ion-button *ngIf="buttonText" expand="block" (click)="attemptQuiz()" class="ion-margin ion-text-wrap"
                 [disabled]="showStatusSpinner">
-                <ion-spinner *ngIf="showStatusSpinner" slot="start" aria-hidden="true"></ion-spinner>
+                <ion-spinner *ngIf="showStatusSpinner" slot="start" aria-hidden="true" />
                 {{ buttonText | translate }}
             </ion-button>
 
@@ -209,12 +206,11 @@
                 unsupportedRules.length || behaviourSupported === false)" expand="block" [href]="module.url" core-link
                 [showBrowserWarning]="false">
                 {{ 'core.openinbrowser' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
 
     </div>
 </core-loading>
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
index 0256b44d5..08856265c 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -27,20 +27,16 @@
                 </ion-label>
 
                 <ion-icon *ngIf="question.type === 'description' || !question.questionnumber" name="fas-circle-info" slot="end"
-                    aria-hidden="true"></ion-icon>
+                    aria-hidden="true" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-requiresgrading'" name="fas-circle-question"
-                    [attr.aria-label]="question.status" slot="end">
-                </ion-icon>
+                    [attr.aria-label]="question.status" slot="end" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-correct'" name="fas-check" color="success"
-                    [attr.aria-label]="question.status" slot="end">
-                </ion-icon>
+                    [attr.aria-label]="question.status" slot="end" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-partiallycorrect'" name="fas-square-check" color="warning"
-                    [attr.aria-label]="question.status" slot="end">
-                </ion-icon>
+                    [attr.aria-label]="question.status" slot="end" />
                 <ion-icon *ngIf="question.stateClass === 'core-question-incorrect' ||
                     question.stateClass === 'core-question-notanswered'" name="fas-xmark" color="danger"
-                    [attr.aria-label]="question.status" slot="end">
-                </ion-icon>
+                    [attr.aria-label]="question.status" slot="end" />
             </ion-item>
         </ion-list>
     </nav>
diff --git a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
index ae476d3b9..30de24c1d 100644
--- a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
+++ b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -19,7 +19,7 @@
                     <core-dynamic-component [component]="data.component" [data]="data.data">
                         <p class="ion-padding">Couldn't find the directive to render this access rule.</p>
                     </core-dynamic-component>
-                    <core-spacer *ngIf="!last"></core-spacer>
+                    <core-spacer *ngIf="!last" />
                 </ng-container>
 
                 <ion-button expand="block" type="submit" class="ion-margin">
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index 8ad67c5c6..792851aea 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -1,20 +1,19 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
-                    [courseId]="courseId">
-                </core-format-text>
+                    [courseId]="courseId" />
             </h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="attempt">
@@ -48,8 +47,7 @@
                     <p class="item-heading">{{ 'addon.mod_quiz.feedback' | translate }}</p>
                     <p>
                         <core-format-text [component]="component" [componentId]="componentId" [text]="feedback" contextLevel="module"
-                            [contextInstanceId]="cmId" [courseId]="courseId">
-                        </core-format-text>
+                            [contextInstanceId]="cmId" [courseId]="courseId" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -64,7 +62,7 @@
         <div collapsible-footer appearOnBottom *ngIf="loaded && attempt && showReviewColumn && attempt.finished" slot="fixed">
             <div class="list-item-limited-width">
                 <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="reviewAttempt()">
-                    <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                     {{ 'addon.mod_quiz.review' | translate }}
                 </ion-button>
             </div>
diff --git a/src/addons/mod/quiz/pages/index/index.html b/src/addons/mod/quiz/pages/index/index.html
index 5691e4137..d21872d64 100644
--- a/src/addons/mod/quiz/pages/index/index.html
+++ b/src/addons/mod/quiz/pages/index/index.html
@@ -1,24 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-quiz-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-quiz-index>
+    <addon-mod-quiz-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index 1da5b0e30..c0df031f7 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -1,13 +1,12 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text *ngIf="quiz" [text]="quiz.name" contextLevel="module" [contextInstanceId]="quiz.coursemodule"
-                    [courseId]="courseId">
-                </core-format-text>
+                    [courseId]="courseId" />
             </h1>
         </ion-title>
 
@@ -15,16 +14,15 @@
             <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
                 (click)="showConnectionError($event)" [attr.aria-label]="'addon.mod_quiz.connectionerror' | translate"
                 aria-haspopup="dialog">
-                <ion-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate" (click)="openNavigation()">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
     <core-timer *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" [endTime]="endTime" (finished)="timeUp()"
-        [timerText]="'addon.mod_quiz.timeleft' | translate" [hiddable]="true">
-    </core-timer>
+        [timerText]="'addon.mod_quiz.timeleft' | translate" [hiddable]="true" />
 </ion-header>
 <ion-content class="limited-width">
     <core-loading [hideUntil]="loaded" class="has-spacer">
@@ -58,8 +56,7 @@
                     <core-question class="ion-text-wrap" [question]="question" [component]="component" [componentId]="cmId"
                         [attemptId]="attempt!.id" [usageId]="attempt!.uniqueid" [offlineEnabled]="offline" contextLevel="module"
                         [contextInstanceId]="cmId" [courseId]="courseId" [preferredBehaviour]="quiz!.preferredbehaviour" [review]="false"
-                        (onAbort)="abortQuiz()" (buttonClicked)="behaviourButtonClicked($event)">
-                    </core-question>
+                        (onAbort)="abortQuiz()" (buttonClicked)="behaviourButtonClicked($event)" />
                 </ion-card>
             </div>
         </form>
@@ -68,14 +65,14 @@
         <ion-row *ngIf="questions.length && !quizAborted && !showSummary" class="spacer-top">
             <ion-col *ngIf="previousPage >= 0">
                 <ion-button expand="block" fill="outline" (click)="changePage(previousPage)" class="ion-text-wrap">
-                    <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                     {{ 'core.previous' | translate }}
                 </ion-button>
             </ion-col>
             <ion-col *ngIf="nextPage >= -1">
                 <ion-button expand="block" (click)="changePage(nextPage)" class="ion-text-wrap" *ngIf="nextPage > 0">
                     {{ 'core.next' | translate }}
-                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                 </ion-button>
                 <ion-button expand="block" (click)="changePage(nextPage)" class="ion-text-wrap" *ngIf="nextPage === -1">
                     {{ 'core.submit' | translate }}
@@ -125,8 +122,7 @@
             </ion-item>
 
             <!-- Time left (if quiz is timed). -->
-            <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate">
-            </core-timer>
+            <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate" />
 
             <!-- List of messages explaining why the quiz cannot be submitted. -->
             <ion-item class="ion-text-wrap" *ngIf="preventSubmitMessages.length">
@@ -153,7 +149,7 @@
                 <ion-button *ngIf="preventSubmitMessages.length" expand="block" class="ion-margin ion-text-wrap" [href]="moduleUrl"
                     core-link [showBrowserWarning]="false">
                     {{ 'core.openinbrowser' | translate }}
-                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                 </ion-button>
 
                 <!-- Button to submit the quiz. -->
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index a39266b09..fa287af18 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_quiz.review' | translate }}</h1>
@@ -10,14 +10,14 @@
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
                 (click)="openNavigation()" aria-haspopup="true">
-                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
 
@@ -70,8 +70,7 @@
                     <ion-label>
                         <p class="item-heading">{{ data.title }}</p>
                         <core-format-text [component]="component" [componentId]="cmId" [text]="data.content" contextLevel="module"
-                            [contextInstanceId]="cmId" [courseId]="courseId">
-                        </core-format-text>
+                            [contextInstanceId]="cmId" [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
             </ion-list>
@@ -103,8 +102,7 @@
                     <!-- Body of the question. -->
                     <core-question class="ion-text-wrap" [question]="question" [component]="component" [componentId]="cmId"
                         [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="false" contextLevel="module"
-                        [contextInstanceId]="cmId" [courseId]="courseId" [review]="true" [preferredBehaviour]="quiz?.preferredbehaviour">
-                    </core-question>
+                        [contextInstanceId]="cmId" [courseId]="courseId" [review]="true" [preferredBehaviour]="quiz?.preferredbehaviour" />
                 </ion-card>
             </div>
         </div>
@@ -114,7 +112,7 @@
                 <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
                     <ion-button [disabled]="previousPage < 0" fill="clear" [attr.aria-label]="'core.previous' | translate"
                         (click)="changePage(previousPage)">
-                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
                 <ion-col class="ion-text-center">
@@ -127,7 +125,7 @@
                 <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
                     <ion-button [disabled]="nextPage >= numPages" fill="clear" [attr.aria-label]="'core.next' | translate"
                         (click)="changePage(nextPage)">
-                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
             </ion-row>
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 a190f2522..a2cccf4a1 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -12,24 +12,23 @@
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
         [component]="component" [componentId]="componentId" (completionChanged)="onCompletionChange()">
         <div class="addon-mod_resource-afterlink ion-text-wrap" *ngIf="module.afterlink" description>
-            <core-format-text [text]="module.afterlink" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
+            <core-format-text [text]="module.afterlink" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
         </div>
     </core-course-module-info>
 
     <ion-card class="core-warning-card" *ngIf="warning">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label><span [innerHTML]="warning"></span></ion-label>
         </ion-item>
     </ion-card>
 
     <ng-container *ngIf="mode === 'iframe'">
-        <core-iframe [src]="src"></core-iframe>
+        <core-iframe [src]="src" />
     </ng-container>
 
     <div *ngIf="mode === 'embedded'" class="ion-padding">
-        <core-format-text [text]="contentText" [filter]="false"></core-format-text>
+        <core-format-text [text]="contentText" [filter]="false" />
     </div>
 
     <ng-container *ngIf="mode === 'external'">
@@ -70,7 +69,7 @@
                         <ion-grid *ngIf="currentStatus === outdatedStatus" class="addon-mod_resource-outdated">
                             <ion-row class="ion-align-items-center">
                                 <ion-col size="auto">
-                                    <ion-icon color="warning" name="fas-triangle-exclamation" aria-hidden="true"></ion-icon>
+                                    <ion-icon color="warning" name="fas-triangle-exclamation" aria-hidden="true" />
                                 </ion-col>
                                 <ion-col>
                                     <p><strong>{{ 'addon.mod_resource.resourcestatusoutdated' | translate }}</strong></p>
@@ -87,22 +86,21 @@
         <div class="list-item-limited-width" *ngIf="mode === 'external'">
             <ion-button *ngIf="isIOS && (!shouldOpenInBrowser || !isOnline)" expand="block" fill="outline"
                 (click)="open(openFileAction.OPEN_WITH)" class="ion-margin ion-text-wrap">
-                <ion-icon name="far-share-from-square" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="far-share-from-square" slot="start" aria-hidden="true" />
                 {{ 'core.openwith' | translate }}
             </ion-button>
 
             <ion-button expand="block" (click)="open(openFileAction.OPEN)" class="ion-margin ion-text-wrap">
                 <ng-container *ngIf="isStreamedFile">
-                    <ion-icon name="fas-play" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-play" slot="start" aria-hidden="true" />
                     {{ 'core.play' | translate }}
                 </ng-container>
                 <ng-container *ngIf="!isStreamedFile">
-                    <ion-icon name="far-file" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="far-file" slot="start" aria-hidden="true" />
                     {{ 'addon.mod_resource.openthefile' | translate }}
                 </ng-container>
             </ion-button>
         </div>
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/resource/pages/index/index.html b/src/addons/mod/resource/pages/index/index.html
index 2509b760f..0355ae6f3 100644
--- a/src/addons/mod/resource/pages/index/index.html
+++ b/src/addons/mod/resource/pages/index/index.html
@@ -1,26 +1,22 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading || activityComponent?.mode === 'iframe'"
         (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-resource-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)">
-    </addon-mod-resource-index>
+    <addon-mod-resource-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 5835113bf..6e3e06fa4 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,13 +10,12 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
-        [courseId]="courseId" [hasDataToSync]="!errorMessage && hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [courseId]="courseId" [hasDataToSync]="!errorMessage && hasOffline" (completionChanged)="onCompletionChange()" />
 
     <!-- Warning message. -->
     <ion-card class="core-info-card" *ngIf="scorm && scorm.warningMessage">
         <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>{{ scorm.warningMessage }}</ion-label>
         </ion-item>
     </ion-card>
@@ -47,8 +46,7 @@
                     <ion-item *ngIf="onlineAttempts.length > 0" button class="divider ion-text-wrap" (click)="toggleGrades()"
                         [attr.aria-label]="(gradesExpanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                            [class.expandable-status-icon-expanded]="gradesExpanded">
-                        </ion-icon>
+                            [class.expandable-status-icon-expanded]="gradesExpanded" />
                         <ion-label>
                             <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
                         </ion-label>
@@ -123,7 +121,7 @@
                 </ion-item>
                 <ion-item class="ion-text-center" *ngIf="scorm.displaycoursestructure && loadingToc">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="scorm.displaycoursestructure && !loadingToc">
@@ -135,17 +133,14 @@
                         <p>{{ currentOrganization.title }}</p>
                         <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                             <p *ngIf="sco.isvisible">
-                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start">
-                                </ion-icon>
+                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start" />
                                 <button class="as-link" *ngIf="sco.prereq && sco.launch" (click)="open($event, false, sco.id)">
                                     <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id"
-                                        [courseId]="courseId">
-                                    </core-format-text>
+                                        [courseId]="courseId" />
                                 </button>
                                 <span *ngIf="!sco.prereq || !sco.launch">
                                     <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id"
-                                        [courseId]="courseId">
-                                    </core-format-text>
+                                        [courseId]="courseId" />
                                 </span>
                                 <span *ngIf="accessInfo && accessInfo.canviewscores && sco.scoreraw">
                                     ({{ 'addon.mod_scorm.score' | translate }}: {{sco.scoreraw}})
@@ -169,7 +164,7 @@
                 </ion-item>
                 <ion-button class="ion-margin ion-text-wrap" expand="block" [href]="module.url" core-link [showBrowserWarning]="false">
                     {{ 'core.openinbrowser' | translate }}
-                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                 </ion-button>
             </ng-container>
 
@@ -188,8 +183,7 @@
                     <!-- Create new attempt -->
                     <ion-item class="ion-text-wrap" *ngIf="!scorm.forcenewattempt && numAttempts > 0 && !incomplete && attemptsLeft > 0">
                         <ion-label>{{ 'addon.mod_scorm.newattempt' | translate }}</ion-label>
-                        <ion-checkbox slot="end" name="newAttempt" [(ngModel)]="startNewAttempt">
-                        </ion-checkbox>
+                        <ion-checkbox slot="end" name="newAttempt" [(ngModel)]="startNewAttempt" />
                     </ion-item>
 
                     <ion-item *ngIf="statusMessage">
@@ -202,7 +196,7 @@
                         <!-- Open mode (Preview or Normal) -->
                         <ion-button *ngIf="!scorm.hidebrowse" expand="block" fill="outline" (click)="open($event, true)"
                             class="ion-text-wrap ion-margin">
-                            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
                             {{ 'addon.mod_scorm.browse' | translate }}
                         </ion-button>
                         <ion-button expand="block" (click)="open($event)" class="ion-text-wrap ion-margin">
@@ -214,15 +208,13 @@
                 <!-- Download progress. -->
                 <ion-item class="ion-text-center" *ngIf="downloading">
                     <ion-label>
-                        <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                         <p class="item-heading" *ngIf="progressMessage">{{ progressMessage | translate }}</p>
-                        <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage">
-                        </core-progress-bar>
+                        <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage" />
                     </ion-label>
                 </ion-item>
             </ng-container>
         </div>
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index 243779e63..cf823ac0b 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -35,11 +35,9 @@
                     [ngClass]="'core-padding-' + sco.level + ' addon-mod_scorm-type-' + sco.scormtype"
                     [attr.aria-current]="selected === sco.id ? 'page' : 'false'" (click)="loadSco(sco)"
                     [disabled]="!sco.prereq || !sco.launch ? true : null" [button]="sco.prereq && sco.launch">
-                    <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start">
-                    </ion-icon>
+                    <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start" />
                     <ion-label>
-                        <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                        </core-format-text>
+                        <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
                         <span *ngIf="accessInfo && accessInfo.canviewscores && sco.scoreraw">
                             ({{ 'addon.mod_scorm.score' | translate }}: {{sco.scoreraw}})
                         </span>
diff --git a/src/addons/mod/scorm/pages/index/index.html b/src/addons/mod/scorm/pages/index/index.html
index 1e5f18cd5..490d03383 100644
--- a/src/addons/mod/scorm/pages/index/index.html
+++ b/src/addons/mod/scorm/pages/index/index.html
@@ -1,24 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-scorm-index [module]="module" [courseId]="courseId" [autoPlayData]="autoPlayData" (dataRetrieved)="updateData($event)">
-    </addon-mod-scorm-index>
+    <addon-mod-scorm-index [module]="module" [courseId]="courseId" [autoPlayData]="autoPlayData" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/scorm/pages/player/player.html b/src/addons/mod/scorm/pages/player/player.html
index a4e33155b..4b426014f 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -1,19 +1,18 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <core-button-with-spinner *ngIf="showToc" [loading]="loadingToc">
                 <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()" [attr.aria-label]="'addon.mod_scorm.toc' | translate"
                     aria-haspopup="true">
-                    <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </core-button-with-spinner>
         </ion-buttons>
@@ -22,13 +21,11 @@
 <ion-content>
     <core-loading [hideUntil]="loaded">
         <core-iframe *ngIf="loaded" id="scorm_object" [src]="src" [iframeWidth]="scormWidth" [iframeHeight]="scormHeight"
-            [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true">
-        </core-iframe>
+            [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true" />
 
         <p *ngIf="!src && errorMessage">{{ errorMessage | translate }}</p>
     </core-loading>
 
     <core-navigation-bar collapsible-footer appearOnBottom *ngIf="loaded && navigationItems.length > 1" [items]="navigationItems"
-        (action)="loadSco($event)" slot="fixed">
-    </core-navigation-bar>
+        (action)="loadSco($event)" slot="fixed" />
 </ion-content>
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 0683b1de0..3ef172a08 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -11,13 +11,12 @@
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
         [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline"
-        (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        (completionChanged)="onCompletionChange()" />
 
     <!-- Survey already done -->
     <ion-card class="core-success-card" *ngIf="survey && survey.surveydone">
         <ion-item>
-            <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-check" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'addon.mod_survey.surveycompletednograph' | translate }}
             </ion-label>
@@ -62,8 +61,7 @@
                             <ion-col class="ion-hide-md-down ion-text-center" size="1"
                                 *ngFor="let option of question.optionsArray; let value=index;">
                                 <!-- Empty slot to avoid errors on migration tslint checks -->
-                                <ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option">
-                                </ion-radio>
+                                <ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option" />
                             </ion-col>
                             <ion-col class="ion-hide-md-up" size="5">
                                 <ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
@@ -108,8 +106,7 @@
                                 <strong>{{question.num}}.</strong> {{ question.text }}
                             </span>
                         </ion-label>
-                        <ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name" [required]="question.required">
-                        </ion-textarea>
+                        <ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name" [required]="question.required" />
                     </ion-item>
                 </ng-container>
 
@@ -121,7 +118,7 @@
         <div class="list-item-limited-width" *ngIf="survey && (survey.surveydone || (!hasOffline && questions && questions.length))">
             <ion-button class="ion-text-wrap ion-margin" expand="block" [href]="module.url" core-link *ngIf="survey.surveydone">
                 {{ 'addon.mod_survey.results' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
             </ion-button>
 
             <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="submit()" [disabled]="!isValidResponse()"
@@ -130,7 +127,6 @@
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/survey/pages/index/index.html b/src/addons/mod/survey/pages/index/index.html
index 38ed35fea..cb6f9bc61 100644
--- a/src/addons/mod/survey/pages/index/index.html
+++ b/src/addons/mod/survey/pages/index/index.html
@@ -1,23 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id"></core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-survey-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-survey-index>
+    <addon-mod-survey-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 c7518f987..e5b74e85c 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,11 +10,10 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <div *ngIf="shouldIframe || (shouldEmbed && isOther)" class="addon-mod_url-embedded-url">
-        <core-iframe [src]="url"></core-iframe>
+        <core-iframe [src]="url" />
     </div>
 
     <ion-list *ngIf="url && !shouldIframe && (!shouldEmbed || !isOther)">
@@ -40,11 +39,10 @@
     <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width" *ngIf="url && !shouldIframe && (!shouldEmbed || !isOther)">
             <ion-button expand="block" (click)="go()" class="ion-margin ion-text-wrap">
-                <ion-icon name="fas-link" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-link" slot="start" aria-hidden="true" />
                 {{ 'addon.mod_url.accessurl' | translate }}
             </ion-button>
         </div>
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/url/pages/index/index.html b/src/addons/mod/url/pages/index/index.html
index 7d4b31ae6..3033ac732 100644
--- a/src/addons/mod/url/pages/index/index.html
+++ b/src/addons/mod/url/pages/index/index.html
@@ -1,23 +1,21 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id"></core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-url-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)"></addon-mod-url-index>
+    <addon-mod-url-index [module]="module" [courseId]="courseId" (dataRetrieved)="updateData($event)" />
 </ion-content>
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 cf3a053cb..eeff12dbc 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
@@ -3,26 +3,24 @@
     <!-- Select subwiki. -->
     <ion-button *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)" [attr.aria-label]="'addon.mod_wiki.subwiki' | translate"
         aria-haspopup="true">
-        <ion-icon *ngIf="!groupWiki" name="fas-user" aria-hidden="true"></ion-icon>
-        <ion-icon *ngIf="groupWiki" name="fas-users" aria-hidden="true"></ion-icon>
+        <ion-icon *ngIf="!groupWiki" name="fas-user" aria-hidden="true" />
+        <ion-icon *ngIf="groupWiki" name="fas-users" aria-hidden="true" />
     </ion-button>
 
     <ion-button *ngIf="!showLoading && currentPageObj" (click)="openMap()" [attr.aria-label]="'addon.mod_wiki.map' | translate"
         aria-haspopup="true">
-        <ion-icon name="fas-map" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-map" aria-hidden="true" />
     </ion-button>
 
     <core-context-menu>
         <core-context-menu-item *ngIf="canEdit && (isOnline || pageIsOffline)" [priority]="590" [content]="'core.edit' | translate"
-            iconAction="fas-pen" (action)="goToEditPage()">
-        </core-context-menu-item>
+            iconAction="fas-pen" (action)="goToEditPage()" />
         <core-context-menu-item *ngIf="canEdit" [priority]="580" [content]="'addon.mod_wiki.createpage' | translate" iconAction="fas-plus"
-            (action)="goToNewPage()">
-        </core-context-menu-item>
+            (action)="goToNewPage()" />
     </core-context-menu>
 
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -31,14 +29,13 @@
 
     <!-- Activity info. -->
     <core-course-module-info *ngIf="isMainPage" [module]="module" [description]="description" [component]="component"
-        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [componentId]="componentId" [courseId]="courseId" (completionChanged)="onCompletionChange()" />
 
     <div *ngIf="pageIsOffline || hasOffline || pageWarning">
         <!-- Wiki has something offline. -->
         <ion-card class="core-warning-card" *ngIf="pageIsOffline || hasOffline">
             <ion-item class="ion-text-wrap">
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
                     <span *ngIf="pageIsOffline">{{ 'core.hasdatatosync' | translate:{$a: pageStr} }}</span>
                     <span *ngIf="!pageIsOffline">{{ 'core.hasdatatosync' | translate:{$a: moduleName} }}</span>
@@ -49,7 +46,7 @@
         <!-- Page warning. -->
         <ion-card class="core-warning-card" *ngIf="pageWarning">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>{{ pageWarning }}</ion-label>
             </ion-item>
         </ion-card>
@@ -58,26 +55,23 @@
         <h2 *ngIf="pageTitle">{{pageTitle}}</h2>
         <article [ngClass]="{'addon-mod_wiki-noedit': !canEdit}">
             <core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"
-                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
-            <core-empty-box *ngIf="!pageContent" icon="fas-file-lines" [message]="'addon.mod_wiki.nocontent' | translate">
-            </core-empty-box>
+                contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
+            <core-empty-box *ngIf="!pageContent" icon="fas-file-lines" [message]="'addon.mod_wiki.nocontent' | translate" />
         </article>
 
         <div class="ion-margin-top" *ngIf="tagsEnabled && tags.length > 0">
             <strong>{{ 'core.tag.tags' | translate }}:</strong>
-            <core-tag-list [tags]="tags"></core-tag-list>
+            <core-tag-list [tags]="tags" />
         </div>
     </div>
 </core-loading>
 
 <core-course-module-navigation collapsible-footer *ngIf="isMainPage" [hidden]="showLoading" [courseId]="courseId"
-    [currentModuleId]="module.id">
-</core-course-module-navigation>
+    [currentModuleId]="module.id" />
 
 <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canEdit">
     <ion-fab-button (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
-        <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-plus" aria-hidden="true" />
         <span class="sr-only">{{ 'addon.mod_wiki.createpage' | translate }}</span>
     </ion-fab-button>
 </ion-fab>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index 00c8c29bb..ecd32a8ee 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -15,7 +15,7 @@
         <ion-list>
             <!-- Go to "home". -->
             <ion-item class="ion-text-wrap" *ngIf="homeView" (click)="goToWikiHome()" button [detail]="true">
-                <ion-icon name="fas-house" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-house" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'addon.mod_wiki.gowikihome' | translate }}</ion-label>
             </ion-item>
             <ng-container *ngFor="let letter of map">
@@ -26,13 +26,12 @@
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
                     [attr.aria-current]="selectedTitle === page.title ? 'page' : 'false'" button [detail]="false">
-                    <ion-icon name="fas-house" slot="start" *ngIf="page.firstpage" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-house" slot="start" *ngIf="page.firstpage" aria-hidden="true" />
                     <ion-label>
-                        <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                        </core-format-text>
+                        <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
                     </ion-label>
                     <ion-note *ngIf="!page.id" slot="end">
-                        <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-clock" aria-hidden="true" />
                         <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
                     </ion-note>
                 </ion-item>
diff --git a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index 42034ae8f..a2d628d3c 100644
--- a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -4,17 +4,15 @@
             <ion-item-divider *ngIf="group.label">
                 <ion-label>
                     <core-format-text [text]="group.label" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true"
-                        class="item-heading">
-                    </core-format-text>
+                        class="item-heading" />
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)" button
                 [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' : 'false'" [detail]="false">
                 <ion-label>
-                    <core-format-text [text]="subwiki.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true">
-                    </core-format-text>
+                    <core-format-text [text]="subwiki.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
                 </ion-label>
-                <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true" />
             </ion-item>
         </ng-container>
     </ion-list>
diff --git a/src/addons/mod/wiki/pages/edit/edit.html b/src/addons/mod/wiki/pages/edit/edit.html
index d44b5db2d..fb07e5de5 100644
--- a/src/addons/mod/wiki/pages/edit/edit.html
+++ b/src/addons/mod/wiki/pages/edit/edit.html
@@ -1,12 +1,11 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
             </h1>
         </ion-title>
 
@@ -22,16 +21,14 @@
         <form [formGroup]="pageForm" #editPageForm *ngIf="loaded">
             <ion-item class="ion-text-wrap" *ngIf="canEditTitle">
                 <ion-label class="sr-only">{{ 'addon.mod_wiki.newpagetitle' | translate }}</ion-label>
-                <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title">
-                </ion-input>
+                <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title" />
             </ion-item>
 
             <ion-item>
                 <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
                 <core-rich-text-editor [control]="contentControl" [placeholder]="'core.content' | translate" name="wiki_page_content"
                     [component]="component" [componentId]="cmId" [autoSave]="true" contextLevel="module" [contextInstanceId]="cmId"
-                    elementId="newcontent_editor" [draftExtraParams]="editorExtraParams">
-                </core-rich-text-editor>
+                    elementId="newcontent_editor" [draftExtraParams]="editorExtraParams" />
             </ion-item>
 
             <ion-item *ngIf="wrongVersionLock" class="ion-text-center addon-mod_wiki-wrongversionlock">
diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html
index 1289bc186..310d7a68d 100644
--- a/src/addons/mod/wiki/pages/index/index.html
+++ b/src/addons/mod/wiki/pages/index/index.html
@@ -1,26 +1,22 @@
 <ion-header [collapsible]="!this.pageId && !this.pageTitle">
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <addon-mod-wiki-index [module]="module" [courseId]="courseId" [action]="action" [pageId]="pageId" [pageTitle]="pageTitle"
-        [subwikiId]="subwikiId" [userId]="userId" [groupId]="groupId" (dataRetrieved)="updateData($event)">
-    </addon-mod-wiki-index>
+        [subwikiId]="subwikiId" [userId]="userId" [groupId]="groupId" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
index ec6884d67..2663902c3 100644
--- a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
+++ b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
@@ -3,8 +3,7 @@
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <h2>{{ field.dimtitle }}</h2>
-                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
         <ion-item *ngIf="edit && field.grades">
@@ -18,8 +17,7 @@
                 interface="action-sheet">
                 <ion-select-option *ngFor="let grade of field.grades" [value]="grade.value">{{grade.label}}</ion-select-option>
             </ion-select>
-            <core-input-errors *ngIf="fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]">
-            </core-input-errors>
+            <core-input-errors *ngIf="fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]" />
         </ion-item>
         <ion-item *ngIf="!edit && field.grades" class="ion-text-wrap">
             <ion-label>
@@ -34,8 +32,7 @@
             <ion-label position="stacked">
                 {{ 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
             </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment">
-            </ion-textarea>
+            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
@@ -44,8 +41,7 @@
                 </p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </p>
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
index 974b0deb6..8097e372e 100644
--- a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
+++ b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
@@ -3,8 +3,7 @@
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <h2>{{ field.dimtitle }}</h2>
-                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
         <ion-item *ngIf="edit">
@@ -13,10 +12,8 @@
                     {{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
                 </span>
             </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment">
-            </ion-textarea>
-            <core-input-errors *ngIf="fieldErrors['peercomment_' + n]" [errorText]="fieldErrors['peercomment_' + n]">
-            </core-input-errors>
+            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment" />
+            <core-input-errors *ngIf="fieldErrors['peercomment_' + n]" [errorText]="fieldErrors['peercomment_' + n]" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
@@ -24,8 +21,7 @@
                     } }}</p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </p>
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
index 33a93fc14..8d79ddd43 100644
--- a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
+++ b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
@@ -3,8 +3,7 @@
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <h2>{{ field.dimtitle }}</h2>
-                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
         <ion-list>
@@ -15,20 +14,19 @@
                             {{ 'addon.mod_workshop.yourassessmentfor' | translate : {'$a': field.dimtitle } }}
                         </span>
                     </ion-label>
-                    <core-input-errors *ngIf="edit && fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]">
-                    </core-input-errors>
+                    <core-input-errors *ngIf="edit && fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]" />
                 </ion-item>
                 <ion-item>
                     <ion-label>
-                        <core-format-text [text]="field.grade0" [filter]="false"></core-format-text>
+                        <core-format-text [text]="field.grade0" [filter]="false" />
                     </ion-label>
-                    <ion-radio slot="start" [value]="-1" [disabled]="!edit"></ion-radio>
+                    <ion-radio slot="start" [value]="-1" [disabled]="!edit" />
                 </ion-item>
                 <ion-item>
                     <ion-label>
-                        <core-format-text [text]="field.grade1" [filter]="false"></core-format-text>
+                        <core-format-text [text]="field.grade1" [filter]="false" />
                     </ion-label>
-                    <ion-radio slot="start" [value]="1" [disabled]="!edit"></ion-radio>
+                    <ion-radio slot="start" [value]="1" [disabled]="!edit" />
                 </ion-item>
             </ion-radio-group>
         </ion-list>
@@ -37,8 +35,7 @@
                 {{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
             </ion-label>
             <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [name]="'peercomment_' + n"
-                [core-auto-rows]="selectedValues[n].peercomment">
-            </ion-textarea>
+                [core-auto-rows]="selectedValues[n].peercomment" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
@@ -46,8 +43,7 @@
                     } }}</p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </p>
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
index 58fa080ba..a9673c651 100644
--- a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
+++ b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
@@ -3,11 +3,9 @@
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <h2 [core-mark-required]="edit">{{ field.dimtitle }}</h2>
-                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="field.description" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId" />
             </ion-label>
-            <core-input-errors *ngIf="edit && fieldErrors['chosenlevelid_' + n]" [errorText]="fieldErrors['chosenlevelid_' + n]">
-            </core-input-errors>
+            <core-input-errors *ngIf="edit && fieldErrors['chosenlevelid_' + n]" [errorText]="fieldErrors['chosenlevelid_' + n]" />
         </ion-item>
         <ion-list>
             <ion-radio-group [(ngModel)]="selectedValues[n].chosenlevelid" [name]="'chosenlevelid_' + n">
@@ -15,11 +13,10 @@
                     <ion-label>
                         <p>
                             <core-format-text [text]="subfield.definition" contextLevel="module" [contextInstanceId]="moduleId"
-                                [courseId]="courseId">
-                            </core-format-text>
+                                [courseId]="courseId" />
                         </p>
                     </ion-label>
-                    <ion-radio slot="start" [value]="subfield.levelid" [disabled]="!edit"></ion-radio>
+                    <ion-radio slot="start" [value]="subfield.levelid" [disabled]="!edit" />
                 </ion-item>
             </ion-radio-group>
         </ion-list>
diff --git a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
index 73bb0ac69..1c08bfc01 100644
--- a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
+++ b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
@@ -3,7 +3,7 @@
 <form name="mma-mod_workshop-assessment-form" #assessmentForm>
     <core-loading [hideUntil]="assessmentStrategyLoaded">
         <ng-container *ngIf="componentClass && assessmentStrategyLoaded">
-            <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+            <core-dynamic-component [component]="componentClass" [data]="data" />
         </ng-container>
 
         <ion-card class="core-info-card" *ngIf="notSupported">
@@ -29,16 +29,13 @@
                 </ion-label>
                 <core-rich-text-editor [control]="feedbackControl" [component]="component" [componentId]="workshop.coursemodule"
                     [autoSave]="true" contextLevel="module" [contextInstanceId]="workshop.coursemodule" elementId="feedbackauthor_editor"
-                    [draftExtraParams]="{asid: assessmentId}" (contentChanged)="onFeedbackChange($event)">
-                </core-rich-text-editor>
+                    [draftExtraParams]="{asid: assessmentId}" (contentChanged)="onFeedbackChange($event)" />
                 <core-input-errors *ngIf="overallFeedkbackRequired && data.fieldErrors && data.fieldErrors['feedbackauthor']"
-                    [errorText]="data.fieldErrors['feedbackauthor']">
-                </core-input-errors>
+                    [errorText]="data.fieldErrors['feedbackauthor']" />
             </ion-item>
             <core-attachments *ngIf="edit && workshop.overallfeedbackfiles" [files]="data.assessment?.feedbackattachmentfiles"
                 [maxSize]="workshop.overallfeedbackmaxbytes" [maxSubmissions]="workshop.overallfeedbackfiles" [component]="component"
-                [componentId]="componentId" [allowOffline]="true" [courseId]="workshop.course">
-            </core-attachments>
+                [componentId]="componentId" [allowOffline]="true" [courseId]="workshop.course" />
             <ion-item *ngIf="edit && access && access.canallocate">
                 <ion-label position="stacked">
                     <span [core-mark-required]="true">
@@ -53,14 +50,12 @@
             <ion-item class="ion-text-wrap" *ngIf="!edit && data.assessment?.feedbackauthor">
                 <ion-label>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="data.assessment?.feedbackauthor"
-                        contextLevel="module" [contextInstanceId]="workshop.coursemodule" [courseId]="workshop.course">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="workshop.coursemodule" [courseId]="workshop.course" />
                 </ion-label>
             </ion-item>
             <ion-item *ngIf="!edit && workshop.overallfeedbackfiles && data.assessment?.feedbackattachmentfiles?.length">
                 <ion-label>
-                    <core-files [files]="data.assessment?.feedbackattachmentfiles" [component]="component" [componentId]="componentId">
-                    </core-files>
+                    <core-files [files]="data.assessment?.feedbackattachmentfiles" [component]="component" [componentId]="componentId" />
                 </ion-label>
             </ion-item>
         </ion-card>
diff --git a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
index f48d01f29..2104fdc7e 100644
--- a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" [detail]="canViewAssessment && !canSelfAssess" (click)="gotoAssessment($event)"
         [button]="canViewAssessment && !canSelfAssess">
-        <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id"></core-user-avatar>
+        <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id" />
         <ion-label>
             <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
             <p *ngIf="showGrade(assessment.grade)">
@@ -22,7 +22,7 @@
             </ion-button>
         </ion-label>
         <ion-note slot="end" *ngIf="offline">
-            <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>{{ 'core.notsent' | translate }}
+            <ion-icon name="fas-clock" aria-hidden="true" />{{ 'core.notsent' | translate }}
         </ion-note>
     </ion-item>
 </core-loading>
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 c4448dfde..d16591ae1 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,7 +1,7 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
@@ -10,8 +10,7 @@
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [component]="component" [componentId]="componentId" [courseId]="courseId"
-        [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()">
-    </core-course-module-info>
+        [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <ion-card *ngIf="phases && workshop">
         <ion-item button (click)="viewPhaseInfo()" [detail]="true">
@@ -24,22 +23,18 @@
             <ion-item button class="ion-text-wrap" *ngFor="let task of phases[workshop.phase].tasks"
                 [class.item-dimmed]="task.code === 'submit' && !showSubmit" (click)="runTask(task)" [detail]="false">
                 <ion-icon slot="start" name="far-circle" *ngIf="task.completed === null"
-                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate" />
                 <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed === ''"
-                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate">
-                </ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate" />
                 <ion-icon slot="start" name="fas-circle-info" color="info" *ngIf="task.completed === 'info'"
-                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate">
-                </ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate" />
                 <ion-icon slot="start" name="fas-circle-check" color="success" *ngIf="task.completed === '1'"
-                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate">
-                </ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate" />
                 <ion-label>
                     <p class="item-heading">{{task.title}}</p>
                     <p *ngIf="task.details" [innerHTML]="task.details"></p>
                 </ion-label>
-                <ion-icon slot="end" *ngIf="task.link && task.code !== 'submit'" name="fas-up-right-from-square" aria-hidden="true">
-                </ion-icon>
+                <ion-icon slot="end" *ngIf="task.link && task.code !== 'submit'" name="fas-up-right-from-square" aria-hidden="true" />
             </ion-item>
         </ng-container>
     </ion-card>
@@ -50,8 +45,7 @@
             <ion-label>
                 <h3 class="item-heading">{{ 'core.description' | translate }}</h3>
                 <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-                    [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="module.id" [courseId]="courseId" />
             </ion-label>
         </ion-item>
     </ion-card>
@@ -64,8 +58,7 @@
                     <ion-label>
                         <h3 class="item-heading">{{ 'addon.mod_workshop.conclusion' | translate }}</h3>
                         <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop.conclusion"
-                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                        </core-format-text>
+                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
             </ion-card>
@@ -97,8 +90,7 @@
                 <ion-label>
                     <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h3>
                     <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop.instructauthors"
-                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ion-card>
@@ -120,8 +112,7 @@
                 </ion-label>
             </ion-item>
             <addon-mod-workshop-submission *ngIf="submission" [submission]="submission" [courseId]="workshop.course" [module]="module"
-                [workshop]="workshop" [access]="access">
-            </addon-mod-workshop-submission>
+                [workshop]="workshop" [access]="access" />
         </ion-card>
 
 
@@ -134,8 +125,7 @@
                 </ion-item-divider>
                 <ng-container *ngFor="let submission of publishedSubmissions">
                     <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module"
-                        [workshop]="workshop" [access]="access" summary="true" class="core-as-item">
-                    </addon-mod-workshop-submission>
+                        [workshop]="workshop" [access]="access" summary="true" class="core-as-item" />
                 </ng-container>
             </ion-card>
         </ng-container>
@@ -147,8 +137,8 @@
                     <ion-label>
                         <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h3>
                         <core-format-text collapsible-item [component]="component" [componentId]="module.id"
-                            [text]="workshop.instructreviewers" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                        </core-format-text>
+                            [text]="workshop.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="courseId" />
                     </ion-label>
                 </ion-item>
             </ion-card>
@@ -167,8 +157,7 @@
                 <ng-container *ngFor="let assessment of (assessments || [])">
                     <addon-mod-workshop-submission [submission]="assessment.submission" [assessment]="assessment"
                         [courseId]="workshop.course" [module]="module" [workshop]="workshop" [access]="access" summary="true"
-                        class="core-as-item">
-                    </addon-mod-workshop-submission>
+                        class="core-as-item" />
                 </ng-container>
             </ion-card>
         </ng-container>
@@ -184,27 +173,25 @@
                     </h3>
                 </ion-label>
             </ion-item-divider>
-            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId">
-            </core-group-selector>
+            <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)" [courseId]="courseId" />
 
             <ng-container *ngFor="let submission of grades">
                 <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module"
-                    [workshop]="workshop" [access]="access" summary="true" class="core-as-item">
-                </addon-mod-workshop-submission>
+                    [workshop]="workshop" [access]="access" summary="true" class="core-as-item" />
             </ng-container>
 
             <ion-grid *ngIf="page > 0 || hasNextPage">
                 <ion-row class="ion-align-items-center">
                     <ion-col *ngIf="page > 0">
                         <ion-button expand="block" fill="outline" (click)="gotoSubmissionsPage(page -1)">
-                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                             {{ 'core.previous' | translate }}
                         </ion-button>
                     </ion-col>
                     <ion-col *ngIf="hasNextPage">
                         <ion-button expand="block" (click)="gotoSubmissionsPage(page + 1)">
                             {{ 'core.next' | translate }}
-                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
                 </ion-row>
@@ -219,17 +206,16 @@
             <!-- Show only on current phase -->
             <ion-button expand="block" *ngIf="access.creatingsubmissionallowed && !submission" (click)="gotoSubmit()"
                 class="ion-text-wrap ion-margin">
-                <ion-icon slot="start" name="fas-plus" aria-hidden="true"></ion-icon>
+                <ion-icon slot="start" name="fas-plus" aria-hidden="true" />
                 {{ 'addon.mod_workshop.createsubmission' | translate }}
             </ion-button>
             <ion-button expand="block" *ngIf="access.modifyingsubmissionallowed && submission" (click)="gotoSubmit()"
                 class="ion-text-wrap ion-margin">
-                <ion-icon slot="start" name="fas-pen" aria-hidden="true"></ion-icon>
+                <ion-icon slot="start" name="fas-pen" aria-hidden="true" />
                 {{ 'addon.mod_workshop.editsubmission' | translate }}
             </ion-button>
         </div>
 
-        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
-        </core-course-module-navigation>
+        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
     </div>
 </core-loading>
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index b0ea2a7a4..5fce6d779 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -22,29 +22,28 @@
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngIf="phase.switchUrl" [href]="phase.switchUrl" [detail]="false">
-                <ion-icon slot="start" name="fas-right-left" aria-hidden="true"></ion-icon>
+                <ion-icon slot="start" name="fas-right-left" aria-hidden="true" />
                 <ion-label>
                     <p>{{ 'addon.mod_workshop.switchphase' + phase.code | translate }}</p>
                 </ion-label>
-                <ion-icon slot="end" name="fas-up-right-from-square" aria-hidden="true"></ion-icon>
+                <ion-icon slot="end" name="fas-up-right-from-square" aria-hidden="true" />
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let task of phase.tasks"
                 [class.item-dimmed]="phase.code !== workshopPhase || (task.code === 'submit' && !showSubmit)" (click)="runTask(task)"
                 [detail]="false" button>
                 <ion-icon slot="start" name="far-circle" *ngIf="task.completed === null"
-                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate"></ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate" />
                 <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed === ''"
-                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate"></ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate" />
                 <ion-icon slot="start" name="fas-circle-info" color="info" *ngIf="task.completed === 'info'"
-                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate"></ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate" />
                 <ion-icon slot="start" name="fas-circle-check" color="success" *ngIf="task.completed === '1'"
-                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate"></ion-icon>
+                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate" />
                 <ion-label>
                     <p class="item-heading ion-text-wrap">{{task.title}}</p>
                     <p *ngIf="task.details" [innerHTML]="task.details"></p>
                 </ion-label>
-                <ion-icon slot="end" *ngIf="task.link && task.code !== 'submit'" name="fas-up-right-from-square" aria-hidden="true">
-                </ion-icon>
+                <ion-icon slot="end" *ngIf="task.link && task.code !== 'submit'" name="fas-up-right-from-square" aria-hidden="true" />
             </ion-item>
         </ng-container>
     </ion-list>
diff --git a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
index a239d2aef..4f77df3f3 100644
--- a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -1,12 +1,11 @@
 <core-loading [hideUntil]="loaded">
     <div *ngIf="!summary">
         <ion-item class="ion-text-wrap addon-workshop-submission-title">
-            <core-user-avatar [user]="profile" [courseId]="courseId" [userId]="profile?.id" slot="start">
-            </core-user-avatar>
+            <core-user-avatar [user]="profile" [courseId]="courseId" [userId]="profile?.id" slot="start" />
             <ion-label>
                 <h2 *ngIf="submission.title">
-                    <core-format-text [text]="submission.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                    <core-format-text [text]="submission.title" contextLevel="module" [contextInstanceId]="module.id"
+                        [courseId]="courseId" />
                 </h2>
                 <p *ngIf="profile && profile?.fullname">{{profile.fullname}}</p>
                 <p *ngIf="showGrade(submission.grade)" [class.addon-has-overriden-grade]="showGrade(submission.gradeover)">
@@ -20,44 +19,42 @@
                 </p>
             </ion-label>
             <ion-note slot="end" *ngIf="!submission.timemodified">
-                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
+                <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'core.notsent' | translate }}
             </ion-note>
             <ion-note slot="end" *ngIf="submission.timemodified">
                 {{submission.timemodified | coreDateDayOrTime}}
                 <ng-container *ngIf="submission.offline">
-                    <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
+                    <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'core.notsent' | translate }}
                 </ng-container>
                 <ng-container *ngIf="submission.deleted">
-                    <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
+                    <ion-icon name="fas-trash" aria-hidden="true" /> {{ 'core.deletedoffline' | translate }}
                 </ng-container>
             </ion-note>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="submission.content">
             <ion-label>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="submission.content" contextLevel="module"
-                    [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="module.id" [courseId]="courseId" />
             </ion-label>
         </ion-item>
-        <core-files [files]="submission.attachmentfiles" [component]="component" [componentId]="componentId"></core-files>
+        <core-files [files]="submission.attachmentfiles" [component]="component" [componentId]="componentId" />
         <ion-item class="ion-text-wrap" *ngIf="viewDetails && submission.feedbackauthor">
             <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start" [courseId]="courseId"
-                [userId]="evaluateByProfile.id"></core-user-avatar>
+                [userId]="evaluateByProfile.id" />
 
             <ion-label>
                 <p class="item-heading" *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                     {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
                 </p>
                 <core-format-text [text]="submission.feedbackauthor" contextLevel="module" [contextInstanceId]="module.id"
-                    [courseId]="courseId">
-                </core-format-text>
+                    [courseId]="courseId" />
             </ion-label>
         </ion-item>
         <ion-item *ngIf="viewDetails">
             <ion-label>
                 <ion-button expand="block" (click)="gotoSubmission()">
                     {{ 'core.showmore' | translate }}
-                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                 </ion-button>
             </ion-label>
         </ion-item>
@@ -65,12 +62,10 @@
 
     <ion-item class="ion-text-wrap" *ngIf="summary" [detail]="submission.timemodified" (click)="gotoSubmission()"
         [button]="submission.timemodified">
-        <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id">
-        </core-user-avatar>
+        <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id" />
         <ion-label>
             <h2 *ngIf="submission.title">
-                <core-format-text [text]="submission.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="submission.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h2>
             <p *ngIf="profile && profile.fullname">{{profile.fullname}}</p>
             <p *ngIf="submission.reviewedbydone">
@@ -100,10 +95,10 @@
         <ion-note slot="end" *ngIf="submission.timemodified">
             {{submission.timemodified | coreDateDayOrTime}}
             <div *ngIf="offline">
-                <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}
+                <ion-icon name="fas-clock" aria-hidden="true" /> {{ 'core.notsent' | translate }}
             </div>
             <div *ngIf="submission.deleted">
-                <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
+                <ion-icon name="fas-trash" aria-hidden="true" /> {{ 'core.deletedoffline' | translate }}
             </div>
         </ion-note>
     </ion-item>
diff --git a/src/addons/mod/workshop/pages/assessment/assessment.html b/src/addons/mod/workshop/pages/assessment/assessment.html
index adc15f1ba..3a385db05 100644
--- a/src/addons/mod/workshop/pages/assessment/assessment.html
+++ b/src/addons/mod/workshop/pages/assessment/assessment.html
@@ -1,13 +1,12 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
                 <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="workshop && workshop.coursemodule"
-                    [courseId]="courseId">
-                </core-format-text>
+                    [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end" [hidden]="!evaluating">
@@ -19,13 +18,12 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshAssessment($event.target)" *ngIf="!evaluating">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
 
         <ion-item class="ion-text-wrap">
-            <core-user-avatar *ngIf="profile" [user]="profile" slot="start" [courseId]="courseId" [userId]="profile.id">
-            </core-user-avatar>
+            <core-user-avatar *ngIf="profile" [user]="profile" slot="start" [courseId]="courseId" [userId]="profile.id" />
 
             <ion-label>
                 <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
@@ -51,8 +49,7 @@
         </ion-item>
 
         <addon-mod-workshop-assessment-strategy *ngIf="assessment && assessmentId && showGrade(assessment.grade) && workshop && access"
-            [workshop]="workshop" [access]="access" [assessmentId]="assessmentId" [userId]="profile && profile.id" [strategy]="strategy">
-        </addon-mod-workshop-assessment-strategy>
+            [workshop]="workshop" [access]="access" [assessmentId]="assessmentId" [userId]="profile && profile.id" [strategy]="strategy" />
 
         <form [formGroup]="evaluateForm" *ngIf="evaluating" #evaluateFormEl>
             <ion-item class="ion-text-wrap">
@@ -90,21 +87,19 @@
                 <ion-label position="stacked">{{ 'addon.mod_workshop.feedbackreviewer' | translate }}</ion-label>
                 <core-rich-text-editor [control]="evaluateForm.controls['text']" name="text" [autoSave]="true" contextLevel="module"
                     [contextInstanceId]="workshop?.coursemodule" elementId="feedbackreviewer_editor"
-                    [draftExtraParams]="{asid: assessmentId}">
-                </core-rich-text-editor>
+                    [draftExtraParams]="{asid: assessmentId}" />
             </ion-item>
         </form>
         <ion-list *ngIf="!evaluating && evaluate && evaluate.text">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start" [courseId]="courseId"
-                    [userId]="evaluateByProfile.id"></core-user-avatar>
+                    [userId]="evaluateByProfile.id" />
                 <ion-label>
                     <h3 class="item-heading" *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
                     </h3>
                     <core-format-text [text]="evaluate.text" contextLevel="module" [contextInstanceId]="workshop?.coursemodule"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ion-list>
diff --git a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
index 044e1ca5d..c28b405f8 100644
--- a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
+++ b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.mod_workshop.editsubmission' | translate }}</h1>
@@ -23,8 +23,7 @@
                     </span>
                 </ion-label>
                 <ion-input name="title" type="text" [placeholder]="'addon.mod_workshop.submissiontitle' | translate"
-                    formControlName="title">
-                </ion-input>
+                    formControlName="title" />
             </ion-item>
 
             <ion-item *ngIf="textAvailable">
@@ -36,13 +35,12 @@
                 <core-rich-text-editor [control]="editForm.controls['content']" name="content"
                     [placeholder]="'addon.mod_workshop.submissioncontent' | translate" [component]="component" [componentId]="componentId"
                     [autoSave]="true" contextLevel="module" [contextInstanceId]="module.id" elementId="content_editor"
-                    [draftExtraParams]="editorExtraParams"></core-rich-text-editor>
+                    [draftExtraParams]="editorExtraParams" />
             </ion-item>
 
             <core-attachments *ngIf="fileAvailable" [files]="attachments" [maxSize]="workshop.maxbytes"
                 [maxSubmissions]="workshop.nattachments" [component]="component" [componentId]="workshop.coursemodule" allowOffline="true"
-                [acceptedTypes]="workshop.submissionfiletypes" [required]="fileRequired" [courseId]="workshop.course">
-            </core-attachments>
+                [acceptedTypes]="workshop.submissionfiletypes" [required]="fileRequired" [courseId]="workshop.course" />
         </form>
     </core-loading>
 </ion-content>
diff --git a/src/addons/mod/workshop/pages/index/index.html b/src/addons/mod/workshop/pages/index/index.html
index b28ffdd39..5a2e08660 100644
--- a/src/addons/mod/workshop/pages/index/index.html
+++ b/src/addons/mod/workshop/pages/index/index.html
@@ -1,24 +1,20 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
-        <ion-buttons slot="end">
-            <!-- The buttons defined by the component will be added in here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="activityComponent?.showLoading" (ionRefresh)="activityComponent?.doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
-    <addon-mod-workshop-index [module]="module" [courseId]="courseId" [group]="selectedGroup" (dataRetrieved)="updateData($event)">
-    </addon-mod-workshop-index>
+    <addon-mod-workshop-index [module]="module" [courseId]="courseId" [group]="selectedGroup" (dataRetrieved)="updateData($event)" />
 </ion-content>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 742496405..ecb28c9a1 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -1,12 +1,12 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text *ngIf="title" [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text *ngIf="title" [text]="title" contextLevel="module" [contextInstanceId]="module.id"
+                    [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end" [hidden]="!loaded">
@@ -23,26 +23,25 @@
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshSubmission($event.target)"
         *ngIf="!((assessmentId && access.assessingallowed) || canAddFeedback)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="submission">
             <addon-mod-workshop-submission [submission]="submission" [courseId]="courseId" [module]="module" [workshop]="workshop"
-                [access]="access">
-            </addon-mod-workshop-submission>
+                [access]="access" />
             <ion-item class="ion-text-wrap" *ngIf="canEdit || canDelete">
                 <ion-label>
                     <ion-button expand="block" *ngIf="canEdit" (click)="editSubmission()">
-                        <ion-icon name="fas-pen" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-pen" slot="start" aria-hidden="true" />
                         {{ 'addon.mod_workshop.editsubmission' | translate }}
                     </ion-button>
                     <ion-button expand="block" *ngIf="!submission.deleted && canDelete" color="danger" (click)="deleteSubmission()">
-                        <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
                         {{ 'addon.mod_workshop.deletesubmission' | translate }}
                     </ion-button>
                     <ion-button expand="block" fill="outline" *ngIf="submission.deleted && canDelete" color="danger"
                         (click)="undoDeleteSubmission()">
-                        <ion-icon name="fas-rotate-left" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-rotate-left" slot="start" aria-hidden="true" />
                         {{ 'core.restore' | translate }}
                     </ion-button>
                 </ion-label>
@@ -52,13 +51,12 @@
         <ion-list *ngIf="!canAddFeedback && evaluate?.text">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start" [courseId]="courseId"
-                    [userId]="evaluateByProfile.id"></core-user-avatar>
+                    [userId]="evaluateByProfile.id" />
                 <ion-label>
                     <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
                     </h2>
-                    <core-format-text [text]="evaluate?.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                    <core-format-text [text]="evaluate?.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ion-list>
@@ -70,8 +68,7 @@
                 </ion-label>
             </ion-item>
             <addon-mod-workshop-assessment [submission]="submission" [assessment]="ownAssessment" [courseId]="courseId" [access]="access"
-                [module]="module" [workshop]="workshop">
-            </addon-mod-workshop-assessment>
+                [module]="module" [workshop]="workshop" />
         </ion-list>
 
         <ion-list *ngIf="submissionInfo && submissionInfo.reviewedby && submissionInfo.reviewedby.length && !assessment">
@@ -82,8 +79,7 @@
             </ion-item>
             <ng-container *ngFor="let reviewer of submissionInfo.reviewedby">
                 <addon-mod-workshop-assessment *ngIf="!reviewer.ownAssessment" [submission]="submission" [assessment]="reviewer"
-                    [courseId]="courseId" [access]="access" [module]="module" [workshop]="workshop">
-                </addon-mod-workshop-assessment>
+                    [courseId]="courseId" [access]="access" [module]="module" [workshop]="workshop" />
             </ng-container>
         </ion-list>
 
@@ -94,8 +90,7 @@
                 </ion-label>
             </ion-item>
             <addon-mod-workshop-assessment *ngFor="let reviewer of submissionInfo.reviewerof" [assessment]="reviewer" [courseId]="courseId"
-                [module]="module" [workshop]="workshop" [access]="access">
-            </addon-mod-workshop-assessment>
+                [module]="module" [workshop]="workshop" [access]="access" />
         </ion-list>
 
         <form [formGroup]="feedbackForm" *ngIf="canAddFeedback && submission" #feedbackFormEl>
@@ -109,7 +104,7 @@
                     <p class="item-heading">{{ 'addon.mod_workshop.publishsubmission' | translate }}</p>
                     <p>{{ 'addon.mod_workshop.publishsubmission_help' | translate }}</p>
                 </ion-label>
-                <ion-toggle formControlName="published" slot="end"></ion-toggle>
+                <ion-toggle formControlName="published" slot="end" />
             </ion-item>
 
             <ion-item class="ion-text-wrap">
@@ -130,26 +125,23 @@
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_workshop.feedbackauthor' | translate }}</ion-label>
                 <core-rich-text-editor [control]="feedbackForm.controls['text']" name="text" [autoSave]="true" contextLevel="module"
-                    [contextInstanceId]="module.id" elementId="feedbackauthor_editor" [draftExtraParams]="{id: submissionId}">
-                </core-rich-text-editor>
+                    [contextInstanceId]="module.id" elementId="feedbackauthor_editor" [draftExtraParams]="{id: submissionId}" />
             </ion-item>
         </form>
 
         <addon-mod-workshop-assessment-strategy *ngIf="assessmentId" [workshop]="workshop" [access]="access" [assessmentId]="assessmentId"
-            [userId]="assessmentUserId" [strategy]="strategy" [edit]="access.assessingallowed">
-        </addon-mod-workshop-assessment-strategy>
+            [userId]="assessmentUserId" [strategy]="strategy" [edit]="access.assessingallowed" />
 
         <ion-list *ngIf="assessmentId && !access.assessingallowed && assessment?.feedbackreviewer">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" slot="start" [courseId]="courseId"
-                    [userId]="evaluateGradingByProfile.id"></core-user-avatar>
+                    [userId]="evaluateGradingByProfile.id" />
                 <ion-label>
                     <h3 class="item-heading" *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}
                     </h3>
                     <core-format-text [text]="assessment!.feedbackreviewer" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="courseId">
-                    </core-format-text>
+                        [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ion-list>
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index b87f3d239..f806e1b4e 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -22,8 +22,7 @@
         </ion-item>
         <ion-item>
             <ion-label class="sr-only">{{ 'addon.notes.note' | translate }}</ion-label>
-            <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text" required="required">
-            </ion-textarea>
+            <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text" required="required" />
         </ion-item>
         <div class="ion-padding">
             <ion-button expand="block" type="submit" [disabled]="processing || text.length < 2">
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index b6b7bccf8..a96150d7f 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -1,38 +1,36 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
             <h1>{{ 'addon.notes.notes' | translate }}</h1>
         </ion-title>
-        <ion-buttons slot="end">
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <core-navbar-buttons slot="end">
     <ion-button [hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()"
         [attr.aria-label]="'core.toggledelete' | translate">
-        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <core-context-menu>
         <core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate"
-            (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true">
-        </core-context-menu-item>
+            (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true" />
         <core-context-menu-item [hidden]="!(notesLoaded && hasOffline)" [priority]="100"
             [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)" [iconAction]="syncIcon"
-            [closeOnClick]="false"></core-context-menu-item>
+            [closeOnClick]="false" />
     </core-context-menu>
 </core-navbar-buttons>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!notesLoaded" (ionRefresh)="refreshNotes(false, $event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="notesLoaded">
         <ion-item class="ion-text-wrap" *ngIf="user">
-            <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
+            <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false" />
             <ion-label>
                 <p class="item-heading">{{user!.fullname}}</p>
             </ion-label>
@@ -52,20 +50,19 @@
 
         <ion-card class="core-warning-card" *ngIf="hasOffline">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
                     {{ 'core.thereisdatatosync' | translate:{$a: 'addon.notes.notes' | translate | lowercase } }}
                 </ion-label>
             </ion-item>
         </ion-card>
 
-        <core-empty-box *ngIf="notes && notes.length === 0" icon="fas-receipt" [message]="'addon.notes.nonotes' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="notes && notes.length === 0" icon="fas-receipt" [message]="'addon.notes.nonotes' | translate" />
 
         <ng-container *ngIf="notes && notes.length > 0">
             <ion-card *ngFor="let note of notes">
                 <ion-item class="ion-text-wrap">
-                    <core-user-avatar [user]="note" [courseId]="courseId" slot="start" *ngIf="!userId"></core-user-avatar>
+                    <core-user-avatar [user]="note" [courseId]="courseId" slot="start" *ngIf="!userId" />
                     <ion-label>
                         <p class="item-heading" *ngIf="!userId">{{note.userfullname}}</p>
                         <p *ngIf="!note.deleted && !note.offline" slot="end">
@@ -73,28 +70,28 @@
                         </p>
                     </ion-label>
                     <p *ngIf="note.offline" slot="end">
-                        <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> <span class="ion-text-wrap">
+                        <ion-icon name="fas-clock" aria-hidden="true" /> <span class="ion-text-wrap">
                             {{ 'core.notsent' | translate }}
                         </span>
                     </p>
                     <p *ngIf="note.deleted" slot="end">
-                        <ion-icon name="fas-trash" aria-hidden="true"></ion-icon> <span class="ion-text-wrap">
+                        <ion-icon name="fas-trash" aria-hidden="true" /> <span class="ion-text-wrap">
                             {{ 'core.deletedoffline' | translate }}
                         </span>
                     </p>
                     <ion-button *ngIf="note.deleted" slot="end" fill="clear" color="danger" (click)="undoDeleteNote($event, note)"
                         [attr.aria-label]="'core.restore' | translate">
-                        <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                     <ion-button *ngIf="showDelete && !note.deleted && (type !== 'personal' || note.usermodified === currentUserId)"
                         slot="end" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteNote($event, note)"
                         [attr.aria-label]="'core.delete' | translate">
-                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <core-format-text [text]="note.content" [filter]="false"></core-format-text>
+                        <core-format-text [text]="note.content" [filter]="false" />
                     </ion-label>
                 </ion-item>
             </ion-card>
@@ -103,7 +100,7 @@
 
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="userId && notesLoaded">
         <ion-fab-button (click)="addNote($event)" [attr.aria-label]="'addon.notes.addnewnote' |translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'addon.notes.addnewnote' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index b7f7a5897..16d7d3e00 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -1,20 +1,20 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!notifications.loaded" (ionRefresh)="refreshNotifications($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="notifications.loaded">
 
@@ -38,40 +38,36 @@
                         role="presentation" slot="start">
                     <div class="core-notification-icon" *ngIf="!notification.imgUrl" slot="start">
                         <img *ngIf="notification.iconurl" [src]="notification.iconurl" core-external-content alt="" role="presentation">
-                        <ion-icon *ngIf="!notification.iconurl" name="fas-bell" aria-hidden="true"></ion-icon>
+                        <ion-icon *ngIf="!notification.iconurl" name="fas-bell" aria-hidden="true" />
                     </div>
                 </ng-container>
 
                 <ion-label>
                     <p class="item-heading">
                         <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0"
-                            [wsNotFiltered]="true">
-                        </core-format-text>
+                            [wsNotFiltered]="true" />
                     </p>
                     <p>{{ notification.timecreated | coreTimeAgo }}<ng-container *ngIf="notification.useridfrom > 0"> · {{
                             notification.userfromfullname }}</ng-container>
                     </p>
                 </ion-label>
                 <ion-note slot="end" *ngIf="!notification.timeread">
-                    <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle" color="primary" aria-hidden="true" />
                 </ion-note>
             </ion-item>
 
             <core-empty-box *ngIf="!notifications || notifications.empty" icon="far-bell"
-                [message]="'addon.notifications.therearentnotificationsyet' | translate">
-            </core-empty-box>
+                [message]="'addon.notifications.therearentnotificationsyet' | translate" />
             <core-infinite-loading [enabled]="notifications.loaded && !notifications.completed" (action)="fetchMoreNotifications($event)"
-                [error]="fetchMoreNotificationsFailed">
-            </core-infinite-loading>
+                [error]="fetchMoreNotificationsFailed" />
         </core-loading>
 
 
         <div class="mark-all-as-read" slot="fixed" collapsible-footer appearOnBottom>
             <ion-chip *ngIf="notifications.loaded && canMarkAllNotificationsAsRead" [disabled]="loadingMarkAllNotificationsAsRead"
                 color="info" class="clickable fab-chip" (click)="markAllNotificationsAsRead()">
-                <ion-icon name="fas-eye" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
-                <ion-spinner [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
-                </ion-spinner>
+                <ion-icon name="fas-eye" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead" />
+                <ion-spinner [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead" />
                 {{ 'addon.notifications.markallread' | translate }}
             </ion-chip>
         </div>
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index 808cfe861..b4d6abaff 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
@@ -25,15 +25,14 @@
                         role="presentation" slot="start">
                     <div class="core-notification-icon" *ngIf="!notification.imgUrl" slot="start">
                         <img *ngIf="notification.iconurl" [src]="notification.iconurl" core-external-content alt="" role="presentation">
-                        <ion-icon *ngIf="!notification.iconurl" name="fas-bell" aria-hidden="true"></ion-icon>
+                        <ion-icon *ngIf="!notification.iconurl" name="fas-bell" aria-hidden="true" />
                     </div>
                 </ng-container>
 
                 <ion-label>
                     <p class="item-heading">
                         <core-format-text [text]="notification.subject" contextLevel="system" [contextInstanceId]="0"
-                            [wsNotFiltered]="true">
-                        </core-format-text>
+                            [wsNotFiltered]="true" />
                     </p>
                     <p *ngIf="notification.timecreated > 0">
                         {{ notification.timecreated | coreTimeAgo }}
@@ -43,8 +42,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap core-notification-body">
                 <ion-label>
-                    <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0">
-                    </core-format-text>
+                    <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0" />
                 </ion-label>
             </ion-item>
         </div>
@@ -52,7 +50,7 @@
         <div collapsible-footer appearOnBottom *ngIf="loaded && actions && actions.length > 0" slot="fixed">
             <div class="list-item-limited-width adaptable-buttons-row">
                 <ion-button expand="block" (click)="action.action()" *ngFor="let action of actions">
-                    <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true"></ion-icon>
+                    <ion-icon slot="start" name="{{action.icon}}" aria-hidden="true" />
                     {{ action.message | translate }}
                 </ion-button>
             </div>
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index 97174d554..16d12064c 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -1,25 +1,23 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
         </ion-title>
-        <ion-buttons slot="end">
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <core-navbar-buttons slot="end">
     <core-context-menu>
         <core-context-menu-item *ngFor="let handler of processorHandlers" [priority]="handler.priority"
-            [content]="handler.label | translate" (action)="openExtraPreferences(handler)" [iconAction]="handler.icon">
-        </core-context-menu-item>
+            [content]="handler.label | translate" (action)="openExtraPreferences(handler)" [iconAction]="handler.icon" />
     </core-context-menu>
 </core-navbar-buttons>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!preferencesLoaded" (ionRefresh)="refreshPreferences($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="preferencesLoaded">
         <ion-card>
@@ -27,14 +25,13 @@
                 <ion-label>
                     <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
                 </ion-label>
-                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)" slot="end"></ion-toggle>
+                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)" slot="end" />
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
                 <ion-label>
                     <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
                 </ion-label>
-                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)" slot="end">
-                </ion-toggle>
+                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)" slot="end" />
             </ion-item>
         </ion-card>
 
@@ -52,11 +49,11 @@
             </ion-item>
 
             <ng-container *ngIf="loggedInOffLegacyMode">
-                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
+                <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}" />
             </ng-container>
 
             <ng-container *ngIf="!loggedInOffLegacyMode">
-                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
+                <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}" />
             </ng-container>
         </ion-card>
     </core-loading>
@@ -98,8 +95,7 @@
                                 <core-button-with-spinner *ngIf="!notification.processorsByName[currentProcessorName].locked"
                                     [loading]="notification.processorsByName[currentProcessorName][state].updating">
                                     <ion-toggle [(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
-                                        (ngModelChange)="changePreferenceLegacy(notification, state)">
-                                    </ion-toggle>
+                                        (ngModelChange)="changePreferenceLegacy(notification, state)" />
                                 </core-button-with-spinner>
                                 <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                                     notification.processorsByName[currentProcessorName][state].checked">
@@ -133,8 +129,7 @@
                         [loading]="notification.processorsByName[currentProcessorName][state].updating">
                         <ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
                             [(ngModel)]="notification.processorsByName[currentProcessorName][state].checked"
-                            (ngModelChange)="changePreferenceLegacy(notification, state)">
-                        </ion-toggle>
+                            (ngModelChange)="changePreferenceLegacy(notification, state)" />
                     </core-button-with-spinner>
                     <span class="text-gray" *ngIf="notification.processorsByName[currentProcessorName].locked &&
                         notification.processorsByName[currentProcessorName][state].checked">
@@ -171,8 +166,7 @@
                         [loading]="notification.processorsByName[currentProcessorName].updating">
                         <ion-toggle *ngIf="!notification.processorsByName[currentProcessorName].locked"
                             [(ngModel)]="notification.processorsByName[currentProcessorName].enabled"
-                            (ngModelChange)="changePreference(notification)">
-                        </ion-toggle>
+                            (ngModelChange)="changePreference(notification)" />
                     </core-button-with-spinner>
                     <span class="text-gray" *ngIf=" notification.processorsByName[currentProcessorName].locked &&
                         notification.processorsByName[currentProcessorName].enabled">
diff --git a/src/addons/privatefiles/pages/index/index.html b/src/addons/privatefiles/pages/index/index.html
index af53f6643..14080063a 100644
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
@@ -11,7 +11,7 @@
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!filesLoaded || (!showPrivateFiles && !showSiteFiles)"
         (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
@@ -39,22 +39,21 @@
             <ng-container *ngFor="let file of files">
                 <ion-item button *ngIf="file.isdir" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)"
                     [detail]="true">
-                    <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
+                    <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate" />
                     <ion-label>{{file.filename}}</ion-label>
                 </ion-item>
-                <core-file *ngIf="!file.isdir" [file]="file" [component]="component" [componentId]="file.contextid"></core-file>
+                <core-file *ngIf="!file.isdir" [file]="file" [component]="component" [componentId]="file.contextid" />
             </ng-container>
         </ion-list>
 
         <!-- Message telling there are no files. -->
-        <core-empty-box *ngIf="!files || !files.length" icon="far-folder-open" [message]="'addon.privatefiles.emptyfilelist' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!files || !files.length" icon="far-folder-open" [message]="'addon.privatefiles.emptyfilelist' | translate" />
     </core-loading>
 
     <!-- Upload a private file. -->
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="showUpload && root !== 'site' && !path">
         <ion-fab-button (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'core.fileuploader.uploadafile' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html b/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
index 92e1b8dd8..a41071878 100644
--- a/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
+++ b/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
@@ -8,7 +8,7 @@
     <ion-radio-group [(ngModel)]="question.behaviourCertaintySelected" [name]="question.behaviourCertaintyOptions[0].name">
         <ion-item class="ion-text-wrap" *ngFor="let option of question.behaviourCertaintyOptions">
             <ion-label>{{ option.text }}</ion-label>
-            <ion-radio slot="end" id="{{option.id}}" [value]="option.value" [disabled]="option.disabled"></ion-radio>
+            <ion-radio slot="end" id="{{option.id}}" [value]="option.value" [disabled]="option.disabled" />
         </ion-item>
     </ion-radio-group>
 
diff --git a/src/addons/qtype/calculated/component/addon-qtype-calculated.html b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
index 68dde2517..bb5fb9136 100644
--- a/src/addons/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
@@ -2,14 +2,13 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
 
     <!-- Display unit options before the answer input. -->
     <ng-container *ngIf="question.options && question.options.length && question.optionsFirst">
-        <ng-container *ngTemplateOutlet="radioUnits"></ng-container>
+        <ng-container *ngTemplateOutlet="radioUnits" />
     </ng-container>
 
     <ion-item *ngIf="question.input" class="ion-text-wrap core-{{question.input.correctIconColor}}-item">
@@ -18,28 +17,26 @@
         <div class="flex-row">
             <!-- Display unit select before the answer input. -->
             <ng-container *ngIf="question.select && question.selectFirst">
-                <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
+                <ng-container *ngTemplateOutlet="selectUnits" />
             </ng-container>
 
             <!-- Input to enter the answer. -->
             <ion-input type="text" [attr.name]="question.input.name"
                 [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [value]="question.input.value"
-                [disabled]="question.input.readOnly" autocorrect="off">
-            </ion-input>
+                [disabled]="question.input.readOnly" autocorrect="off" />
 
             <!-- Display unit select after the answer input. -->
             <ng-container *ngIf="question.select && !question.selectFirst">
-                <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
+                <ng-container *ngTemplateOutlet="selectUnits" />
             </ng-container>
         </div>
         <ion-icon *ngIf="question.input.correctIcon" class="core-correct-icon ion-align-self-center" slot="end"
-            [name]="question.input.correctIcon" [color]="[question.input.correctIconColor]">
-        </ion-icon>
+            [name]="question.input.correctIcon" [color]="[question.input.correctIconColor]" />
     </ion-item>
 
     <!-- Display unit options after the answer input. -->
     <ng-container *ngIf="question.options && question.options.length && !question.optionsFirst">
-        <ng-container *ngTemplateOutlet="radioUnits"></ng-container>
+        <ng-container *ngTemplateOutlet="radioUnits" />
     </ng-container>
 </ion-list>
 
@@ -63,8 +60,7 @@
         <ion-item class="ion-text-wrap" *ngFor="let option of question!.options">
             <ion-label>{{ option.text }}</ion-label>
             <ion-radio slot="end" [value]="option.value" [disabled]="option.disabled || question!.input?.readOnly"
-                [color]="question!.input?.correctIconColor">
-            </ion-radio>
+                [color]="question!.input?.correctIconColor" />
         </ion-item>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
diff --git a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
index 65adb222a..40af91739 100644
--- a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
+++ b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
@@ -1,24 +1,22 @@
 <div *ngIf="question && (question.text || question.text === '')" class="addon-qtype-ddimageortext-container">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
-    <core-loading [hideUntil]="question.loaded"></core-loading>
+    <core-loading [hideUntil]="question.loaded" />
 
     <ion-item class="ion-text-wrap" [hidden]="!question.loaded">
         <ion-label>
             <ion-card *ngIf="!question.readOnly" class="core-info-card">
                 <ion-item>
-                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
                 </ion-item>
             </ion-card>
 
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()" />
         </ion-label>
     </ion-item>
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
         <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
-            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
-        </core-format-text>
+            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()" />
     </div>
 </div>
diff --git a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
index bdd9a91fc..d800948a9 100644
--- a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
+++ b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
@@ -1,23 +1,22 @@
 <div *ngIf="question && (question.text || question.text === '')" class="addon-qtype-ddmarker-container">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
-    <core-loading [hideUntil]="question.loaded"></core-loading>
+    <core-loading [hideUntil]="question.loaded" />
 
     <ion-item class="ion-text-wrap" [hidden]="!question.loaded">
         <ion-label>
             <ion-card *ngIf="!question.readOnly" class="core-info-card">
                 <ion-item>
-                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
                 </ion-item>
             </ion-card>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" #questiontext
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()">
-            </core-format-text>
+                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
+                (afterRender)="textRendered()" />
         </ion-label>
     </ion-item>
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
         <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
-            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
-        </core-format-text>
+            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()" />
     </div>
 </div>
diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
index aa11107e3..d243f0fbf 100644
--- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
+++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
@@ -1,22 +1,20 @@
 <div *ngIf="question && (question.text || question.text === '')">
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
-    <core-loading [hideUntil]="question.loaded"></core-loading>
+    <core-loading [hideUntil]="question.loaded" />
 
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
         <ion-card *ngIf="!question.readOnly" class="core-info-card">
             <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                 <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
             </ion-item>
         </ion-card>
         <div class="addon-qtype-ddwtos-container">
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />
 
             <core-format-text *ngIf="question.answers" [component]="component" [componentId]="componentId" [text]="question.answers"
-                [filter]="false" (afterRender)="answersRendered()">
-            </core-format-text>
+                [filter]="false" (afterRender)="answersRendered()" />
 
             <div class="drags"></div>
         </div>
diff --git a/src/addons/qtype/description/component/addon-qtype-description.html b/src/addons/qtype/description/component/addon-qtype-description.html
index 089d5912a..f8c067dc6 100644
--- a/src/addons/qtype/description/component/addon-qtype-description.html
+++ b/src/addons/qtype/description/component/addon-qtype-description.html
@@ -5,8 +5,7 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
 </ion-list>
diff --git a/src/addons/qtype/essay/component/addon-qtype-essay.html b/src/addons/qtype/essay/component/addon-qtype-essay.html
index 4996c7b8b..452f716f8 100644
--- a/src/addons/qtype/essay/component/addon-qtype-essay.html
+++ b/src/addons/qtype/essay/component/addon-qtype-essay.html
@@ -3,8 +3,7 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
 
@@ -20,13 +19,11 @@
             <!-- Plain text textarea. -->
             <ion-textarea *ngIf="question.isPlainText" class="core-question-textarea" [ngClass]='{"core-monospaced": question.isMonospaced}'
                 placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.textarea.name"
-                [ngModel]="question.textarea.text">
-            </ion-textarea>
+                [ngModel]="question.textarea.text" />
             <!-- Rich text editor. -->
             <core-rich-text-editor *ngIf="!question.isPlainText" placeholder="{{ 'core.question.answer' | translate }}"
                 [control]="formControl" [name]="question.textarea.name" [component]="component" [componentId]="componentId"
-                [autoSave]="false">
-            </core-rich-text-editor>
+                [autoSave]="false" />
         </ion-item>
 
         <!-- Draft files not supported. -->
@@ -39,8 +36,7 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="question.textarea.text"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                    </core-format-text>
+                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 </ion-label>
             </ion-item>
         </ng-container>
@@ -49,8 +45,7 @@
         <ng-container *ngIf="question.allowsAttachments">
             <core-attachments *ngIf="uploadFilesSupported && question.attachmentsDraftIdInput" [files]="attachments" [component]="component"
                 [componentId]="componentId" [maxSize]="question.attachmentsMaxBytes" [maxSubmissions]="question.attachmentsMaxFiles"
-                [allowOffline]="offlineEnabled" [acceptedTypes]="question.attachmentsAcceptedTypes" [courseId]="courseId">
-            </core-attachments>
+                [allowOffline]="offlineEnabled" [acceptedTypes]="question.attachmentsAcceptedTypes" [courseId]="courseId" />
 
             <input *ngIf="question.attachmentsDraftIdInput" type="hidden" [name]="question.attachmentsDraftIdInput.name"
                 [value]="question.attachmentsDraftIdInput.value">
@@ -70,8 +65,7 @@
         <ion-item class="ion-text-wrap" *ngIf="question.answer || question.answer === ''">
             <ion-label>
                 <core-format-text [ngClass]='{"core-monospaced": question.isMonospaced}' [component]="component" [componentId]="componentId"
-                    [text]="question.answer" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [text]="question.answer" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
 
@@ -79,8 +73,7 @@
         <ion-item class="ion-text-wrap" *ngIf="question.wordCountInfo">
             <ion-label>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="question.wordCountInfo"
-                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
 
@@ -88,14 +81,12 @@
         <ion-item class="ion-text-wrap" *ngIf="question.answerPlagiarism">
             <ion-label>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="question.answerPlagiarism"
-                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             </ion-label>
         </ion-item>
 
         <!-- List of attachments when reviewing. -->
         <core-files *ngIf="question.attachments" [files]="question.attachments" [component]="component" [componentId]="componentId"
-            [extraHtml]="question.attachmentsPlagiarisms">
-        </core-files>
+            [extraHtml]="question.attachmentsPlagiarisms" />
     </ng-container>
 </ion-list>
diff --git a/src/addons/qtype/gapselect/component/addon-qtype-gapselect.html b/src/addons/qtype/gapselect/component/addon-qtype-gapselect.html
index 7bb2c46df..4ce037280 100644
--- a/src/addons/qtype/gapselect/component/addon-qtype-gapselect.html
+++ b/src/addons/qtype/gapselect/component/addon-qtype-gapselect.html
@@ -2,8 +2,7 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="questionRendered()">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="questionRendered()" />
         </ion-label>
     </ion-item>
 </ion-list>
diff --git a/src/addons/qtype/match/component/addon-qtype-match.html b/src/addons/qtype/match/component/addon-qtype-match.html
index eed4cf9bf..28b81e9d5 100644
--- a/src/addons/qtype/match/component/addon-qtype-match.html
+++ b/src/addons/qtype/match/component/addon-qtype-match.html
@@ -2,15 +2,13 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
     <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
         <ion-label>
             <core-format-text id="addon-qtype-match-question-{{row.id}}" [component]="component" [componentId]="componentId"
-                [text]="row.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [text]="row.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">
                 {{ row.accessibilityLabel }}
             </label>
@@ -24,8 +22,8 @@
             </ion-select-option>
         </ion-select>
         <ion-icon *ngIf="row.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success" slot="end"
-            [attr.aria-label]="'core.question.correct' | translate"></ion-icon>
+            [attr.aria-label]="'core.question.correct' | translate" />
         <ion-icon *ngIf="row.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger" slot="end"
-            [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
+            [attr.aria-label]="'core.question.incorrect' | translate" />
     </ion-item>
 </section>
diff --git a/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html b/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html
index db188b1f2..ea009c6c1 100644
--- a/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html
+++ b/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html
@@ -1,7 +1,6 @@
 <ion-list class="addon-qtype-multianswer-container" *ngIf="question && (question.text || question.text === '')">
     <div class="fake-ion-item ion-text-wrap">
         <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-            [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="questionRendered()">
-        </core-format-text>
+            [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="questionRendered()" />
     </div>
 </ion-list>
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index f1d5a707f..a6b5d868f 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -4,13 +4,11 @@
         <ion-label>
             <p>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             </p>
             <p *ngIf="question.prompt">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="question.prompt" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
             </p>
         </ion-label>
     </ion-item>
@@ -20,23 +18,20 @@
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' [class]="option.class">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 <div *ngIf="option.feedback" class="specificfeedback">
                     <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                    </core-format-text>
+                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 </div>
             </ion-label>
 
             <ion-checkbox slot="end" [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-            </ion-checkbox>
+                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' />
 
             <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                [attr.aria-label]="'core.question.correct' | translate"></ion-icon>
+                [attr.aria-label]="'core.question.correct' | translate" />
             <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
+                [attr.aria-label]="'core.question.incorrect' | translate" />
 
             <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
             <input type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
@@ -48,23 +43,20 @@
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <ion-label [class]="option.class">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                </core-format-text>
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 <div *ngIf="option.feedback" class="specificfeedback">
                     <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-                    </core-format-text>
+                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 </div>
             </ion-label>
 
             <ion-radio [value]="option.value" [disabled]="option.disabled" slot="end"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-            </ion-radio>
+                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' />
 
             <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                [attr.aria-label]="'core.question.correct' | translate"></ion-icon>
+                [attr.aria-label]="'core.question.correct' | translate" />
             <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                [attr.aria-label]="'core.question.incorrect' | translate"></ion-icon>
+                [attr.aria-label]="'core.question.incorrect' | translate" />
         </ion-item>
         <ion-button *ngIf="!question.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
             [disabled]="!question.singleChoiceModel" (click)="clear()" type="button">
diff --git a/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
index dedbb455d..5c65cee57 100644
--- a/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
+++ b/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
@@ -2,18 +2,15 @@
     <ion-item class="ion-text-wrap addon-qtype-shortanswer-text">
         <ion-label>
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
-                [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
     <ion-item *ngIf="question.input && !question.input.isInline"
         class="ion-text-wrap addon-qtype-shortanswer-input core-{{question.input.correctIconColor}}-item">
         <ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
         <ion-input type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate"
-            [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly">
-        </ion-input>
+            [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" />
         <ion-icon *ngIf="question.input.correctIcon" class="core-correct-icon" slot="end" [name]="question.input.correctIcon"
-            [color]="[question.input.correctIconColor]">
-        </ion-icon>
+            [color]="[question.input.correctIconColor]" />
     </ion-item>
 </ion-list>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 4b93a8815..c890ab0dc 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
@@ -20,8 +20,7 @@
         <ion-card class="wholecourse">
             <ion-card-header>
                 <ion-card-title>
-                    <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="courseId" [adaptImg]="false">
-                    </core-format-text>
+                    <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="courseId" [adaptImg]="false" />
                 </ion-card-title>
                 <ion-item class="size ion-text-wrap ion-no-padding">
                     <ion-label>
@@ -34,15 +33,14 @@
                 </ion-item>
                 <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
                     class="ion-no-margin" [disabled]="prefetchCourseData.loading">
-                    <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start"></ion-icon>
-                    <ion-spinner *ngIf="prefetchCourseData.loading" slot="start"></ion-spinner>
+                    <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start" />
+                    <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" />
                     {{ prefetchCourseData.statusTranslatable | translate }}
                 </ion-button>
                 <ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse($event)" expand="block" color="danger"
                     class="ion-no-margin ion-margin-top">
                     <ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
-                        { name: title }">
-                    </ion-icon>
+                        { name: title }" />
                     {{ 'addon.storagemanager.deleteall' | translate }}
                 </ion-button>
             </ion-card-header>
@@ -55,27 +53,23 @@
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                         [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
-                            [class.expandable-status-icon-expanded]="section.expanded">
-                        </ion-icon>
+                            [class.expandable-status-icon-expanded]="section.expanded" />
                         <ion-label>
                             <p class="item-heading ion-text-wrap">
                                 <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
-                                    [adaptImg]="false">
-                                </core-format-text>
+                                    [adaptImg]="false" />
                             </p>
                             <ion-badge [color]="section.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                 *ngIf="!section.calculatingSize && section.totalSize > 0">
                                 <ion-icon name="fam-cloud-done" *ngIf="section.downloadStatus === statusDownloaded"
-                                    [attr.aria-label]="'core.downloaded' | translate">
-                                </ion-icon>{{ section.totalSize | coreBytesToSize }}
+                                    [attr.aria-label]="'core.downloaded' | translate" />{{ section.totalSize | coreBytesToSize }}
                             </ion-badge>
                             <ion-badge color="light" *ngIf="section.calculatingSize">
                                 {{ 'core.calculating' | translate }}
                             </ion-badge>
                             <!-- Download progress. -->
                             <p *ngIf="downloadEnabled && section.isDownloading">
-                                <core-progress-bar [progress]="section.total === 0 ? -1 : section.count / section.total">
-                                </core-progress-bar>
+                                <core-progress-bar [progress]="section.total === 0 ? -1 : section.count / section.total" />
                             </p>
                         </ion-label>
                         <div class="storage-buttons" slot="end"
@@ -83,8 +77,7 @@
                             <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
                                 <core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
                                     [status]="section.downloadStatus" [enabled]="true" (action)="prefecthSection(section)"
-                                    [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true">
-                                </core-download-refresh>
+                                    [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true" />
 
                                 <ion-badge class="core-course-download-section-progress"
                                     *ngIf="section.isDownloading && section.count < section.total" role="progressbar"
@@ -96,8 +89,7 @@
                             <ion-button (click)="deleteForSection($event, section)"
                                 *ngIf="!section.calculatingSize && section.totalSize > 0" color="danger" fill="clear">
                                 <ion-icon name="fas-trash" slot="icon-only"
-                                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
-                                </ion-icon>
+                                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }" />
                             </ion-button>
                         </div>
                     </ion-item>
@@ -108,19 +100,16 @@
                             <ion-item class="core-course-storage-activity"
                                 *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                 <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
-                                    [modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural">
-                                </core-mod-icon>
+                                    [modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural" />
                                 <ion-label class="ion-text-wrap">
                                     <p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">
                                         <core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
-                                            [contextInstanceId]="module.id" [adaptImg]="false">
-                                        </core-format-text>
+                                            [contextInstanceId]="module.id" [adaptImg]="false" />
                                     </p>
                                     <ion-badge [color]="module.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                         *ngIf="!module.calculatingSize && module.totalSize > 0">
                                         <ion-icon name="fam-cloud-done" *ngIf="module.downloadStatus === statusDownloaded"
-                                            [attr.aria-label]="'core.downloaded' | translate">
-                                        </ion-icon>{{ module.totalSize | coreBytesToSize }}
+                                            [attr.aria-label]="'core.downloaded' | translate" />{{ module.totalSize | coreBytesToSize }}
                                     </ion-badge>
                                     <ion-badge color="light" *ngIf="module.calculatingSize">
                                         {{ 'core.calculating' | translate }}
@@ -131,13 +120,11 @@
                                     <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton &&
                                         module.downloadStatus !== statusDownloaded" [status]="module.downloadStatus" [enabled]="true"
                                         [canTrustDownload]="true" [loading]="module.spinner || module.handlerData.spinner"
-                                        (action)="prefetchModule(module)">
-                                    </core-download-refresh>
+                                        (action)="prefetchModule(module)" />
                                     <ion-button fill="clear" (click)="deleteForModule($event, module, section)"
                                         *ngIf="!module.calculatingSize && module.totalSize > 0" color="danger">
                                         <ion-icon name="fas-trash" slot="icon-only"
-                                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">
-                                        </ion-icon>
+                                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }" />
                                     </ion-button>
                                     <p *ngIf="!downloadEnabled || !module.handlerData?.showDownloadButton" class="sr-only">
                                         {{ 'core.notdownloadable' | translate }}
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 134cc61bc..892a08ab1 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'addon.storagemanager.managedownloads' | translate }}</h1>
@@ -22,7 +22,7 @@
                 <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage($event)"
                     [hidden]="spaceUsage.spaceUsage! + spaceUsage.cacheEntries! <= 0"
                     [attr.aria-label]="'addon.storagemanager.deleteallsitedata' | translate">
-                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-item>
         </ion-card>
@@ -38,16 +38,14 @@
                 </ion-label>
                 <ion-button slot="end" (click)="deleteCompletelyDownloadedCourses($event)"
                     [disabled]="completelyDownloadedCourses.length === 0" color="danger" fill="clear">
-                    <ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
-                    </ion-icon>
+                    <ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}" />
                 </ion-button>
             </ion-item>
             <ion-item *ngFor="let course of downloadedCourses" class="course" (click)="openCourse(course.id, course.title)" button
                 [detail]="true">
                 <ion-label class="ion-text-wrap">
                     <p class="item-heading">
-                        <core-format-text [text]="course.title" contextLevel="course" [contextInstanceId]="course.id" [adaptImg]="false">
-                        </core-format-text>
+                        <core-format-text [text]="course.title" contextLevel="course" [contextInstanceId]="course.id" [adaptImg]="false" />
                     </p>
                     <p class="item-heading item-heading-secondary" *ngIf="course.isDownloading">
                         {{ 'core.downloading' | translate }}
@@ -58,8 +56,7 @@
                 </ion-label>
                 <ion-button slot="end" (click)="deleteCourse($event, course)" [disabled]="course.isDownloading" color="danger" fill="clear">
                     <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
-                            { name: course.title }">
-                    </ion-icon>
+                            { name: course.title }" />
                 </ion-button>
             </ion-item>
         </ion-card>
diff --git a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
index 231a6bb4a..f4a639077 100644
--- a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
+++ b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
@@ -3,8 +3,7 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p *ngIf="value !== '0'">
             {{ 'core.yes' | translate }}
@@ -20,11 +19,9 @@
     <ion-label>
         <span class="label-text" [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
-        <core-input-errors [control]="form.controls[modelName]"></core-input-errors>
+        <core-input-errors [control]="form.controls[modelName]" />
     </ion-label>
-    <ion-checkbox item-end [formControlName]="modelName">
-    </ion-checkbox>
+    <ion-checkbox item-end [formControlName]="modelName" />
 </ion-item>
diff --git a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
index ff6256e5d..8e2a21349 100644
--- a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
+++ b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
@@ -3,8 +3,7 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p *ngIf="valueNumber">{{ valueNumber * 1000 | coreFormatDate }}</p>
         <p *ngIf="displayValue">{{ displayValue }}</p>
@@ -16,12 +15,10 @@
     <ion-label position="stacked">
         <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
     </ion-label>
     <ion-datetime [formControlName]="modelName" [placeholder]="'core.choosedots' | translate" [displayFormat]="format" [max]="max"
-        [min]="min" [monthNames]="monthNames" [displayTimezone]="displayTimezone">
-    </ion-datetime>
-    <core-input-errors [control]="form.controls[modelName]"></core-input-errors>
+        [min]="min" [monthNames]="monthNames" [displayTimezone]="displayTimezone" />
+    <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
index 2abaebba9..545f8938b 100644
--- a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
+++ b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
@@ -3,13 +3,11 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-                [wsNotFiltered]="valueNotFiltered">
-            </core-format-text>
+                [wsNotFiltered]="valueNotFiltered" />
         </p>
     </ion-label>
 </ion-item>
@@ -19,8 +17,7 @@
     <ion-label position="stacked">
         <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
     </ion-label>
     <ion-select [formControlName]="modelName" [placeholder]="'core.choosedots' | translate" interface="action-sheet"
@@ -28,5 +25,5 @@
         <ion-select-option value="">{{ 'core.choosedots' | translate }}</ion-select-option>
         <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
     </ion-select>
-    <core-input-errors [control]="form.controls[modelName]"></core-input-errors>
+    <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html b/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
index f6a65df66..8cffbf860 100644
--- a/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
+++ b/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
@@ -3,13 +3,11 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-                [wsNotFiltered]="valueNotFiltered">
-            </core-format-text>
+                [wsNotFiltered]="valueNotFiltered" />
         </p>
     </ion-label>
 </ion-item>
@@ -19,10 +17,9 @@
     <ion-label position="stacked">
         <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
     </ion-label>
-    <ion-input type="text" [formControlName]="modelName" [placeholder]="field.name"></ion-input>
-    <core-input-errors [control]="form.controls[modelName]"></core-input-errors>
+    <ion-input type="text" [formControlName]="modelName" [placeholder]="field.name" />
+    <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
index e75d88886..123ac8566 100644
--- a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
+++ b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
@@ -3,13 +3,11 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-                [wsNotFiltered]="valueNotFiltered">
-            </core-format-text>
+                [wsNotFiltered]="valueNotFiltered" />
         </p>
     </ion-label>
 </ion-item>
@@ -19,10 +17,9 @@
     <ion-label position="stacked">
         <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
     </ion-label>
-    <ion-input [type]="inputType" [formControlName]="modelName" [placeholder]="field.name" maxlength="{{maxLength}}"></ion-input>
-    <core-input-errors [control]="form.controls[modelName]"></core-input-errors>
+    <ion-input [type]="inputType" [formControlName]="modelName" [placeholder]="field.name" maxlength="{{maxLength}}" />
+    <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
index 29f16a3c5..6077c5990 100644
--- a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
+++ b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
@@ -3,13 +3,11 @@
     <ion-label>
         <p class="item-heading">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-                [wsNotFiltered]="valueNotFiltered">
-            </core-format-text>
+                [wsNotFiltered]="valueNotFiltered" />
         </p>
     </ion-label>
 </ion-item>
@@ -19,12 +17,10 @@
     <ion-label position="stacked">
         <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
-                [courseId]="courseId" [wsNotFiltered]="true">
-            </core-format-text>
+                [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
-        <core-input-errors [control]="control"></core-input-errors>
+        <core-input-errors [control]="control" />
     </ion-label>
     <core-rich-text-editor [control]="control" [placeholder]="field.name" [autoSave]="true" [contextLevel]="contextLevel"
-        [contextInstanceId]="contextInstanceId" [elementId]="modelName">
-    </core-rich-text-editor>
+        [contextInstanceId]="contextInstanceId" [elementId]="modelName" />
 </ion-item>
diff --git a/src/core/components/attachments/core-attachments.html b/src/core/components/attachments/core-attachments.html
index 3b5cd9371..a86ff9e2c 100644
--- a/src/core/components/attachments/core-attachments.html
+++ b/src/core/components/attachments/core-attachments.html
@@ -21,20 +21,18 @@
     <div *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">
-        </core-file>
+            (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)">
-        </core-local-file>
+            (onRename)="renamed(index, $event)" />
     </div>
 
     <!-- Button to add more files. -->
     <ion-button expand="block"
         *ngIf="unlimitedFiles || (maxSubmissions !== undefined && maxSubmissions >= 0 && files && files.length < maxSubmissions)"
         class="ion-text-wrap ion-margin" (click)="add()">
-        <ion-icon name="fas-plus" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-plus" slot="start" aria-hidden="true" />
         {{ 'core.fileuploader.addfiletext' | translate }}
     </ion-button>
 </core-loading>
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 da739883f..3ce1927eb 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
@@ -3,4 +3,4 @@
 </div>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate"></ion-spinner>
+<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate" />
diff --git a/src/core/components/chart/core-chart.html b/src/core/components/chart/core-chart.html
index f8b0b20f4..95cdd8ed1 100644
--- a/src/core/components/chart/core-chart.html
+++ b/src/core/components/chart/core-chart.html
@@ -2,7 +2,7 @@
 
 <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-icon>
+        <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 58a91cd47..1ffd3db43 100644
--- a/src/core/components/combobox/core-combobox.html
+++ b/src/core/components/combobox/core-combobox.html
@@ -1,6 +1,5 @@
 <ion-button (click)="openSelect($event)" *ngIf="interface !== 'modal' && icon" [disabled]="disabled">
-    <ion-icon [name]="icon" [attr.aria-label]="label" slot="start">
-    </ion-icon>
+    <ion-icon [name]="icon" [attr.aria-label]="label" slot="start" />
     <div class="select-icon" role="presentation" aria-hidden="true">
         <div class="select-icon-inner"></div>
     </div>
@@ -12,7 +11,7 @@
 
 <ion-button *ngIf="interface === 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
     [attr.aria-expanded]="expanded" (click)="openSelect()" [disabled]="disabled" expand="block" role="combobox">
-    <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true"></ion-icon>
+    <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true" />
     <span class="sr-only" *ngIf="label">{{ label }}:</span>
     <div class="select-text">
         <slot name="text">{{selection}}</slot>
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 bddc16604..1e2accd45 100644
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@@ -9,18 +9,15 @@
             [showBrowserWarning]="item.showBrowserWarning">
             <ion-label>
                 <p class="item-heading">
-                    <core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text>
+                    <core-format-text [clean]="true" [text]="item.content" [filter]="false" />
                 </p>
             </ion-label>
             <ng-container *ngIf="(item.href || item.action) && item.iconAction">
                 <ion-icon *ngIf="item.iconAction !== 'spinner' && item.iconAction !== 'toggle'" [name]="item.iconAction"
-                    [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true">
-                </ion-icon>
-                <ion-spinner *ngIf="item.iconAction === 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate">
-                </ion-spinner>
+                    [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true" />
+                <ion-spinner *ngIf="item.iconAction === 'spinner'" slot="end" [attr.aria-label]="'core.loading' | translate" />
                 <ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)"
-                    slot="end">
-                </ion-toggle>
+                    slot="end" />
             </ng-container>
             <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
                 <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
diff --git a/src/core/components/context-menu/core-context-menu.html b/src/core/components/context-menu/core-context-menu.html
index f55c2038b..1c58d36f3 100644
--- a/src/core/components/context-menu/core-context-menu.html
+++ b/src/core/components/context-menu/core-context-menu.html
@@ -1,6 +1,5 @@
 <ion-button [hidden]="hideMenu" fill="clear" [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
     [attr.aria-controls]="uniqueId">
-    <ion-icon [name]="icon" slot="icon-only" aria-hidden="true">
-    </ion-icon>
+    <ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
 </ion-button>
 <ng-content></ng-content>
diff --git a/src/core/components/course-image/course-image.html b/src/core/components/course-image/course-image.html
index 6251e1eea..a9e8d0ead 100644
--- a/src/core/components/course-image/course-image.html
+++ b/src/core/components/course-image/course-image.html
@@ -1,5 +1,4 @@
-<ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true">
-</ion-icon>
+<ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true" />
 <ion-avatar *ngIf="course.courseimage" slot="start">
     <img [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
 </ion-avatar>
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 7f940df2e..06a81d24f 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -2,22 +2,22 @@
     <!-- Download button. -->
     <ion-button *ngIf="status === statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
-        <ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true"></ion-icon>
+        <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 [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
-        <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true"></ion-icon>
+        <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 || 'core.downloaded') | translate" role="status"></ion-icon>
+        name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status" />
 
     <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>
+        [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate" />
 </ng-container>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate" />
diff --git a/src/core/components/dynamic-component/core-dynamic-component.html b/src/core/components/dynamic-component/core-dynamic-component.html
index 99c89fec9..9baedda3d 100644
--- a/src/core/components/dynamic-component/core-dynamic-component.html
+++ b/src/core/components/dynamic-component/core-dynamic-component.html
@@ -2,4 +2,4 @@
 <ng-content *ngIf="!instance"></ng-content>
 
 <!-- Container of the dynamic component -->
-<ng-container #dynamicComponent></ng-container>
+<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 34604cea3..b40bb9da8 100644
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/src/core/components/empty-box/core-empty-box.html
@@ -1,4 +1,4 @@
 <img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
+<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
 <p *ngIf="message">{{ message }}</p>
 <ng-content></ng-content>
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index 59c82403a..565930726 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -13,16 +13,15 @@
         </ion-label>
         <div slot="end" class="flex-row">
             <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading" [canTrustDownload]="!alwaysDownload"
-                (action)="download()">
-            </core-download-refresh>
+                (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-icon>
+                <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
             </ion-button>
 
             <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)"
                 [attr.aria-label]="'core.delete' | translate" color="danger">
-                <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
             </ion-button>
         </div>
     </ion-item>
diff --git a/src/core/components/files/core-files.html b/src/core/components/files/core-files.html
index be8580a72..4a2a9fd47 100644
--- a/src/core/components/files/core-files.html
+++ b/src/core/components/files/core-files.html
@@ -1,19 +1,17 @@
 <ng-container *ngIf="showInline && contentText">
-    <core-format-text [text]="contentText" [filter]="false"></core-format-text>
+    <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">
-    </core-file>
+        [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"></core-local-file>
+    <core-local-file *ngIf="file.name && !file.embedType" [file]="file" />
 
     <ion-item class="ion-text-wrap" *ngIf="extraHtml && extraHtml[i]">
         <ion-label>
-            <core-format-text [component]="component" [componentId]="componentId" [text]="extraHtml[i]">
-            </core-format-text>
+            <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 2becbbc0a..300db0750 100644
--- a/src/core/components/group-selector/group-selector.html
+++ b/src/core/components/group-selector/group-selector.html
@@ -1,7 +1,7 @@
 <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>
-            <ion-icon name="fas-circle-question" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle-question" slot="start" aria-hidden="true" />
             <ion-label>{{ multipleGroupsMessage }}</ion-label>
         </ion-item>
     </ion-card>
@@ -14,8 +14,7 @@
         <ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet"
             [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
             <ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id">
-                <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true">
-                </core-format-text>
+                <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
             </ion-select-option>
         </ion-select>
     </ion-item>
diff --git a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
index f23a2ee22..cf55200bd 100644
--- a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
+++ b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
@@ -1,9 +1,9 @@
 <ion-button fill="clear" (click)="scroll($event, 'backward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'start'"
     [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
-    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" flip-rtl="false"></ion-icon>
+    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" flip-rtl="false" />
 </ion-button>
 
 <ion-button fill="clear" (click)="scroll($event, 'forward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'end'"
     [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
-    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" flip-rtl="false"></ion-icon>
+    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" flip-rtl="false" />
 </ion-button>
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index 6c7a0fa1d..d15df751c 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -1,5 +1,5 @@
 <!-- Display a loading until the iframe page is loaded. -->
-<core-loading [hideUntil]="!loading && safeUrl"></core-loading>
+<core-loading [hideUntil]="!loading && safeUrl" />
 
 <!--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. -->
@@ -7,7 +7,7 @@
     <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar && !loading">
         <ion-button fill="clear" (click)="toggleFullscreen()"
             [attr.aria-label]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
-            <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true"></ion-icon>
+            <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </core-navbar-buttons>
 
diff --git a/src/core/components/infinite-loading/core-infinite-loading.html b/src/core/components/infinite-loading/core-infinite-loading.html
index 32b06f708..4ec1b60b2 100644
--- a/src/core/components/infinite-loading/core-infinite-loading.html
+++ b/src/core/components/infinite-loading/core-infinite-loading.html
@@ -10,7 +10,7 @@
 </ng-container>
 
 <ion-infinite-scroll [disabled]="!enabled || error || loadingMore" (ionInfinite)="loadMore()" [position]="position">
-    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+    <ion-infinite-scroll-content />
 </ion-infinite-scroll>
 
 <ng-container *ngIf="!loadingMore && position === 'top'">
@@ -25,5 +25,5 @@
 </ng-container>
 
 <div *ngIf="loadingMore" class="ion-padding ion-text-center" #spinnercontainer>
-    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
 </div>
diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index cabe746af..94bbb6b9d 100644
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@@ -1,5 +1,5 @@
 <div class="core-loading-container" *ngIf="!hideUntil" role="status" @coreShowHideAnimation>
-    <ion-spinner color="primary" aria-hidden="true"></ion-spinner>
+    <ion-spinner color="primary" aria-hidden="true" />
     <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
 </div>
 <ng-content *ngIf="loaded" @coreShowHideAnimation></ng-content>
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index d3ca0cdd2..01f2dee0a 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -18,28 +18,27 @@
 
             <!-- 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">
-            </ion-input>
+                (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode" />
 
             <div class="buttons" slot="end">
                 <ion-button fill="clear" *ngIf="isIOS && !editMode" (click)="openFile($event, true)"
                     [attr.aria-label]="openButtonLabel | translate">
-                    <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true"></ion-icon>
+                    <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
                 </ion-button>
 
                 <ng-container *ngIf="manage">
                     <ion-button *ngIf="editMode" fill="clear" [attr.aria-label]="'core.save' | translate" color="success" type="submit">
-                        <ion-icon name="fas-check" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-check" slot="icon-only" aria-hidden="true" />
                     </ion-button>
 
                     <ion-button *ngIf="!editMode" fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
                         [attr.aria-label]="'core.edit' | translate">
-                        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
                     </ion-button>
 
                     <ion-button *ngIf="!editMode" fill="clear" (click)="deleteFile($event)" [attr.aria-label]="'core.delete' | translate"
                         color="danger">
-                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ng-container>
             </div>
diff --git a/src/core/components/mark-required/core-mark-required.html b/src/core/components/mark-required/core-mark-required.html
index 73f8ec1b0..d4466a62b 100644
--- a/src/core/components/mark-required/core-mark-required.html
+++ b/src/core/components/mark-required/core-mark-required.html
@@ -1,4 +1,3 @@
 <ng-content></ng-content>
 <ion-icon *ngIf="coreMarkRequired" class="core-input-required-asterisk" name="fas-circle-exclamation" color="danger"
-    [attr.aria-label]="requiredLabel">
-</ion-icon>
+    [attr.aria-label]="requiredLabel" />
diff --git a/src/core/components/message/message.html b/src/core/components/message/message.html
index 9380c0137..f8c3e1099 100644
--- a/src/core/components/message/message.html
+++ b/src/core/components/message/message.html
@@ -2,8 +2,7 @@
     <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">
-            </core-user-avatar>
+            <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">
@@ -13,8 +12,7 @@
         </div>
 
         <core-format-text class="message-text" [text]="text" (afterRender)="afterRender.emit()" [contextLevel]="contextLevel"
-            [contextInstanceId]="instanceId" [courseId]="courseId">
-        </core-format-text>
+            [contextInstanceId]="instanceId" [courseId]="courseId" />
     </div>
 
     <div class="extra">
@@ -23,21 +21,21 @@
                 {{ time | coreFormatDate: 'strftimetime' }}
             </ng-container>
             <ng-container *ngIf="!message.pending && message.deleted">
-                <ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
+                <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"></ion-icon>
+            <ion-icon *ngIf="message.pending" name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status" />
         </div>
 
         <ion-button *ngIf="showDelete && !message.deleted && message.delete !== false" fill="clear" [@coreSlideInOut]="'fromRight'"
             color="danger" (click)="delete($event)" [attr.aria-label]="'addon.messages.deletemessage' | translate" class="delete-button">
-            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+            <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)" [attr.aria-label]="'core.restore' | translate" class="delete-button">
-            <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </div>
 
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index 24703b279..3d77826db 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,16 +1,15 @@
 <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" [attr.aria-label]="previousTitle" (click)="navigate(previousIndex)">
-            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+            <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">
-        </core-progress-bar>
+        <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" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
-            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+            <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 9a37010a7..95629d7ab 100644
--- a/src/core/components/password-modal/password-modal.html
+++ b/src/core/components/password-modal/password-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -17,12 +17,11 @@
                 <ion-label class="sr-only">{{ placeholder | translate }}</ion-label>
                 <core-show-password name="password">
                     <ion-input class="ion-text-wrap core-ioninput-password" name="password" type="password"
-                        placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus [clearOnEdit]="false">
-                    </ion-input>
+                        placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus [clearOnEdit]="false" />
                 </core-show-password>
             </ion-item>
             <ion-item *ngIf="error" class="ion-text-wrap ion-padding-top text-danger">
-                <core-format-text [text]="error | translate"></core-format-text>
+                <core-format-text [text]="error | translate" />
             </ion-item>
         </div>
         <ion-button expand="block" type="submit" [disabled]="!password">
diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html
index 2739ea78b..5fd316b99 100644
--- a/src/core/components/progress-bar/core-progress-bar.html
+++ b/src/core/components/progress-bar/core-progress-bar.html
@@ -8,4 +8,4 @@
     </div>
 </ng-container>
 
-<ion-progress-bar *ngIf="progressNumber < 0" [color]="color" type="indeterminate"></ion-progress-bar>
+<ion-progress-bar *ngIf="progressNumber < 0" [color]="color" type="indeterminate" />
diff --git a/src/core/components/refresh-button-modal/refresh-button-modal.html b/src/core/components/refresh-button-modal/refresh-button-modal.html
index 58fa174ae..bc7da7b54 100644
--- a/src/core/components/refresh-button-modal/refresh-button-modal.html
+++ b/src/core/components/refresh-button-modal/refresh-button-modal.html
@@ -1,4 +1,4 @@
 <ion-chip class="clickable fab-chip" color="info" (click)="closeModal()">
-    <ion-icon name="fas-arrows-rotate" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-arrows-rotate" aria-hidden="true" />
     {{ 'core.refresh' | translate }}
 </ion-chip>
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html
index dec9430f5..b7d807ffd 100644
--- a/src/core/components/send-message-form/core-send-message-form.html
+++ b/src/core/components/send-message-form/core-send-message-form.html
@@ -7,6 +7,6 @@
     </textarea>
     <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled" [attr.aria-label]="'core.send' | translate"
         [core-suppress-events] (onClick)="submitForm($event)">
-        <ion-icon name="send" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
+        <ion-icon name="send" slot="icon-only" aria-hidden="true" flip-rtl />
     </ion-button>
 </form>
diff --git a/src/core/components/sheet-modal/sheet-modal.html b/src/core/components/sheet-modal/sheet-modal.html
index e5a79c2c8..47f7d9c6a 100644
--- a/src/core/components/sheet-modal/sheet-modal.html
+++ b/src/core/components/sheet-modal/sheet-modal.html
@@ -1,2 +1,2 @@
-<ion-backdrop></ion-backdrop>
+<ion-backdrop />
 <div class="sheet-modal--wrapper" #wrapper></div>
diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html
index 5a260c94a..ed3fb385f 100644
--- a/src/core/components/show-password/core-show-password.html
+++ b/src/core/components/show-password/core-show-password.html
@@ -1,5 +1,5 @@
 <ng-content></ng-content>
 <ion-button fill="clear" [attr.aria-label]="(shown ? 'core.hide' : 'core.show') | translate" core-suppress-events (onClick)="toggle($event)"
     (mousedown)="doNotBlur($event)" (keydown)="doNotBlur($event)" (keyup)="toggle($event)">
-    <ion-icon [name]="shown ? 'fas-eye-slash' : 'fas-eye'" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon [name]="shown ? 'fas-eye-slash' : 'fas-eye'" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/components/sites-list/sites-list.html b/src/core/components/sites-list/sites-list.html
index b00d973dd..7ac9a9149 100644
--- a/src/core/components/sites-list/sites-list.html
+++ b/src/core/components/sites-list/sites-list.html
@@ -1,19 +1,19 @@
 <ion-list class="core-sites-list" *ngIf="accountsList">
     <ion-card *ngIf="accountsList.currentSite">
-        <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: accountsList.currentSite, isCurrentSite: true}"></ng-container>
+        <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: accountsList.currentSite, isCurrentSite: true}" />
 
-        <ng-container *ngTemplateOutlet="siteItem; context: {site: accountsList.currentSite, isCurrentSite: true}"></ng-container>
+        <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>
+            <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
         </ng-container>
     </ion-card>
 
     <ion-card *ngFor="let sites of accountsList.otherSites">
-        <ng-container *ngTemplateOutlet="siteCardHeader; context: {site: sites[0], isCurrentSite: false}"></ng-container>
+        <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>
+            <ng-container *ngTemplateOutlet="siteItem; context: {site: site, isCurrentSite: false}" />
         </ng-container>
     </ion-card>
 
@@ -24,7 +24,7 @@
     <ion-item-divider sticky="true" *ngIf="site" class="core-sites-list-sitename">
         <ion-label>
             <h2>
-                <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+                <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id" />
             </h2>
             <p *ngIf="displaySiteUrl(site)">
                 <a [href]="site.siteUrl" core-link [autoLogin]="isCurrentSite ? 'yes' : 'no'">
@@ -40,17 +40,15 @@
     <ion-item [attr.button]="isSiteClickable(isCurrentSite) ? true : null" (click)="siteClicked($event, site, isCurrentSite)"
         [attr.detail]="isSiteClickable(isCurrentSite) ? 'true' : 'false'" [class.item-current]="isCurrentSite">
 
-        <core-user-avatar [site]="site" slot="start" [linkProfile]="false" [siteId]="site.id"></core-user-avatar>
+        <core-user-avatar [site]="site" slot="start" [linkProfile]="false" [siteId]="site.id" />
 
         <ion-label>
             <p class="item-heading">{{site.fullname}}</p>
             <ng-container *ngIf="siteLabelTemplate" [ngTemplateOutlet]="siteLabelTemplate"
-                [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}">
-            </ng-container>
+                [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
         </ion-label>
 
         <ng-container *ngIf="siteItemTemplate" [ngTemplateOutlet]="siteItemTemplate"
-            [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}">
-        </ng-container>
+            [ngTemplateOutletContext]="{site: site, isCurrentSite: isCurrentSite}" />
     </ion-item>
 </ng-template>
diff --git a/src/core/components/split-view/split-view.html b/src/core/components/split-view/split-view.html
index fa61e7011..27aa94ddd 100644
--- a/src/core/components/split-view/split-view.html
+++ b/src/core/components/split-view/split-view.html
@@ -1,6 +1,5 @@
 <ion-content class="menu">
     <ng-content></ng-content>
 </ion-content>
-<ion-router-outlet class="content-outlet"></ion-router-outlet>
-<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true">
-</core-empty-box>
+<ion-router-outlet class="content-outlet" />
+<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
diff --git a/src/core/components/stories/components/course-image-cards-page/course-image-cards-page.html b/src/core/components/stories/components/course-image-cards-page/course-image-cards-page.html
index 90514a8e3..f1ad00bca 100644
--- a/src/core/components/stories/components/course-image-cards-page/course-image-cards-page.html
+++ b/src/core/components/stories/components/course-image-cards-page/course-image-cards-page.html
@@ -9,7 +9,7 @@
     <ion-content>
         <ion-card *ngFor="let course of courses">
             <div class="course-image-wrapper">
-                <core-course-image [course]="course" [fill]="true"></core-course-image>
+                <core-course-image [course]="course" [fill]="true" />
             </div>
             <ion-card-header>
                 <ion-card-title>{{ course.shortname }}</ion-card-title>
diff --git a/src/core/components/stories/components/course-image-list-page/course-image-list-page.html b/src/core/components/stories/components/course-image-list-page/course-image-list-page.html
index ec47e63fb..f9638bea7 100644
--- a/src/core/components/stories/components/course-image-list-page/course-image-list-page.html
+++ b/src/core/components/stories/components/course-image-list-page/course-image-list-page.html
@@ -9,7 +9,7 @@
     <ion-content>
         <ion-list>
             <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <core-course-image [course]="course" slot="start"></core-course-image>
+                <core-course-image [course]="course" slot="start" />
                 <ion-label>
                     {{ course.shortname }}
                 </ion-label>
diff --git a/src/core/components/stories/components/empty-box-page/empty-box-page.html b/src/core/components/stories/components/empty-box-page/empty-box-page.html
index 9246d8bf6..0bd2c567a 100644
--- a/src/core/components/stories/components/empty-box-page/empty-box-page.html
+++ b/src/core/components/stories/components/empty-box-page/empty-box-page.html
@@ -8,9 +8,8 @@
     </ion-header>
     <ion-content>
         <div class="core-flex-fill">
-            <core-search-box></core-search-box>
-            <core-empty-box-wrapper [icon]="icon" [content]="content" [dimmed]="dimmed" class="core-flex-fill">
-            </core-empty-box-wrapper>
+            <core-search-box />
+            <core-empty-box-wrapper [icon]="icon" [content]="content" [dimmed]="dimmed" class="core-flex-fill" />
         </div>
     </ion-content>
 </ion-app>
diff --git a/src/core/components/stories/components/sites-list-wrapper/sites-list-wrapper.html b/src/core/components/stories/components/sites-list-wrapper/sites-list-wrapper.html
index c51b145ec..a7b72397b 100644
--- a/src/core/components/stories/components/sites-list-wrapper/sites-list-wrapper.html
+++ b/src/core/components/stories/components/sites-list-wrapper/sites-list-wrapper.html
@@ -10,7 +10,7 @@
 
             <ng-template #siteItem let-site="site">
                 <ion-button *ngIf="extraDetails === 'delete-button'" fill="clear" color="danger" slot="end">
-                    <ion-icon name="fas-trash" slot="icon-only"></ion-icon>
+                    <ion-icon name="fas-trash" slot="icon-only" />
                 </ion-button>
 
                 <ion-badge *ngIf="extraDetails === 'badge'" slot="end">
diff --git a/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html b/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html
index 349247d15..d63c3a67e 100644
--- a/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html
+++ b/src/core/components/swipe-navigation-tour/core-swipe-navigation-tour.html
@@ -1,4 +1,4 @@
-<ion-icon name="moodle-swipe-navigation" aria-hidden="true"></ion-icon>
+<ion-icon name="moodle-swipe-navigation" aria-hidden="true" />
 <p>{{ 'core.swipenavigationtourdescription' | translate }}</p>
 <ion-button (click)="dismiss()" expand="block" fill="outline">
     {{ 'core.endonesteptour' | translate }}
diff --git a/src/core/components/swipe-slides/swipe-slides.html b/src/core/components/swipe-slides/swipe-slides.html
index 088172613..d3b02b245 100644
--- a/src/core/components/swipe-slides/swipe-slides.html
+++ b/src/core/components/swipe-slides/swipe-slides.html
@@ -1,7 +1,6 @@
 <swiper-container #swiperRef *ngIf="loaded" (slidechangetransitionstart)="slideWillChange()" (slidechangetransitionend)="slideDidChange()"
     [initialSlide]="options.initialSlide" [runCallbacksOnInit]="options.runCallbacksOnInit">
     <swiper-slide *ngFor="let item of items; index as index" [attr.aria-hidden]="!isActive(index)">
-        <ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}">
-        </ng-container>
+        <ng-container *ngIf="template" [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 f7f2fdea5..1819ef577 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -1,10 +1,10 @@
 <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"></ion-spinner>
+        <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
         <ng-container *ngIf="hideUntil">
             <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
                 [attr.aria-label]="'core.previous' | translate">
-                <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
+                <ion-icon *ngIf="showPrevButton" 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">
@@ -14,7 +14,7 @@
                             (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"></ion-icon>
+                            <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true" />
                             <ion-label>
                                 <h2>{{ tab.title | translate}}</h2>
                                 <ion-badge *ngIf="tab.badge">
@@ -30,7 +30,7 @@
             </swiper-container>
             <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
                 [attr.aria-label]="'core.next' | translate">
-                <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
+                <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
             </ion-button>
         </ng-container>
     </ion-tab-bar>
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index e24cb2f7f..f247419f8 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -1,9 +1,9 @@
 <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
-    <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+    <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
     <ng-container *ngIf="hideUntil">
         <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
             [attr.aria-label]="'core.previous' | translate">
-            <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
+            <ion-icon *ngIf="showPrevButton" 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">
@@ -12,7 +12,7 @@
                     <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-icon>
+                        <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true" />
                         <ion-label>
                             <h2>{{ tab.title | translate}}</h2>
                             <ion-badge *ngIf="tab.badge">
@@ -28,7 +28,7 @@
         </swiper-container>
         <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
             [attr.aria-label]="'core.next' | translate">
-            <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
+            <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
         </ion-button>
     </ng-container>
 </ion-tab-bar>
diff --git a/src/core/components/timer/core-timer.html b/src/core/components/timer/core-timer.html
index 811f753b5..1ad29de84 100644
--- a/src/core/components/timer/core-timer.html
+++ b/src/core/components/timer/core-timer.html
@@ -1,12 +1,12 @@
 <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"></ng-container>
+            <ng-container *ngTemplateOutlet="timerTemplate" />
         </ion-label>
     </ion-item>
 
     <div *ngIf="mode === modeBasic" class="core-timer ion-padding ion-justify-content-{{align}}" role="timer" [attr.aria-label]="timerText">
-        <ng-container *ngTemplateOutlet="timerTemplate"></ng-container>
+        <ng-container *ngTemplateOutlet="timerTemplate" />
     </div>
 
     <ng-template #timerTemplate>
diff --git a/src/core/features/block/components/block/core-block.html b/src/core/features/block/components/block/core-block.html
index 100fe873a..7a77ed781 100644
--- a/src/core/features/block/components/block/core-block.html
+++ b/src/core/features/block/components/block/core-block.html
@@ -1,5 +1,5 @@
 <!-- Only render the block if it's supported. -->
 <ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}" role="region"
     [attr.aria-labelledby]="labelledBy ? labelledBy : null">
-    <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+    <core-dynamic-component [component]="componentClass" [data]="data" />
 </ion-card>
diff --git a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
index 023752457..23488226d 100644
--- a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
+++ b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html
@@ -1,8 +1,8 @@
 <ion-item-divider class="ion-text-wrap" *ngIf="title" [sticky]="true">
     <ion-label>
         <h2>
-            <core-format-text [text]="title | translate" contextLevel="block" [contextInstanceId]="block.instanceid" [courseId]="courseId">
-            </core-format-text>
+            <core-format-text [text]="title | translate" contextLevel="block" [contextInstanceId]="block.instanceid"
+                [courseId]="courseId" />
         </h2>
     </ion-label>
 </ion-item-divider>
@@ -10,15 +10,13 @@
     <ion-item *ngIf="block.contents?.content" class="ion-text-wrap core-block-content">
         <ion-label>
             <core-format-text [text]="block.contents?.content" contextLevel="block" [contextInstanceId]="block.instanceid"
-                [courseId]="courseId">
-            </core-format-text>
+                [courseId]="courseId" />
         </ion-label>
     </ion-item>
     <ion-item *ngIf="block.contents?.footer" class="ion-text-wrap core-block-footer">
         <ion-label>
             <core-format-text [text]="block.contents?.footer" contextLevel="block" [contextInstanceId]="block.instanceid"
-                [courseId]="courseId">
-            </core-format-text>
+                [courseId]="courseId" />
         </ion-label>
     </ion-item>
 </core-loading>
diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.html b/src/core/features/block/components/side-blocks-button/side-blocks-button.html
index d7450264c..523e63c8d 100644
--- a/src/core/features/block/components/side-blocks-button/side-blocks-button.html
+++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.html
@@ -1,3 +1,3 @@
 <ion-button (click)="openBlocks()" [userTour]="userTour" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary">
-    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/features/block/components/side-blocks/side-blocks.html b/src/core/features/block/components/side-blocks/side-blocks.html
index 4e3f50f6c..6b2f37b59 100644
--- a/src/core/features/block/components/side-blocks/side-blocks.html
+++ b/src/core/features/block/components/side-blocks/side-blocks.html
@@ -2,23 +2,22 @@
     <ion-toolbar>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="blocks.length > 0">
             <ng-container *ngFor="let block of blocks">
-                <core-block *ngIf="block.visible" [block]="block" [contextLevel]="contextLevel" [instanceId]="instanceId"></core-block>
+                <core-block *ngIf="block.visible" [block]="block" [contextLevel]="contextLevel" [instanceId]="instanceId" />
             </ng-container>
         </ion-list>
 
-        <core-empty-box *ngIf="blocks.length === 0" icon="fas-table-cells-large" [message]="'core.block.noblocks' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="blocks.length === 0" icon="fas-table-cells-large" [message]="'core.block.noblocks' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html
index cee1b18af..ba28f8aeb 100644
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@@ -1,43 +1,39 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" [contextLevel]="contextLevel" [contextInstanceId]="instanceId" [courseId]="courseId" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button *ngIf="canDeleteComments" slot="end" fill="clear" (click)="toggleDelete()"
                 [attr.aria-label]="'core.toggledelete' | translate">
-                <ion-icon *ngIf="!showDelete" name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
-                <ion-icon *ngIf="showDelete" name="fas-check" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!showDelete" name="fas-pen" slot="icon-only" aria-hidden="true" />
+                <ion-icon *ngIf="showDelete" name="fas-check" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <core-context-menu>
                 <core-context-menu-item [hidden]="!(commentsLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate"
-                    (action)="refreshComments(false)" [iconAction]="refreshIcon" [closeOnClick]="true">
-                </core-context-menu-item>
+                    (action)="refreshComments(false)" [iconAction]="refreshIcon" [closeOnClick]="true" />
                 <core-context-menu-item [hidden]="!(commentsLoaded && hasOffline && isOnline)" [priority]="100"
                     [content]="'core.settings.synchronizenow' | translate" (action)="refreshComments(true)" [iconAction]="syncIcon"
-                    [closeOnClick]="false">
-                </core-context-menu-item>
+                    [closeOnClick]="false" />
             </core-context-menu>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!commentsLoaded" (ionRefresh)="refreshComments(false, $event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="commentsLoaded">
-        <core-empty-box *ngIf="!comments?.length && !offlineComment" icon="fas-comments" [message]="'core.comments.nocomments' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!comments?.length && !offlineComment" icon="fas-comments"
+            [message]="'core.comments.nocomments' | translate" />
 
         <!-- Load previous messages. -->
-        <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
-        </core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError" />
 
         <ion-list class="addon-messages-discussion-container">
             <ng-container *ngFor="let comment of comments; index as index; last as last">
@@ -48,18 +44,16 @@
 
                 <core-message [message]="comment" [text]="comment.content" [time]="comment.timecreated * 1000" [user]="comment"
                     [showDelete]="showDelete" [contextLevel]="contextLevel" [instanceId]="instanceId" [courseId]="courseId"
-                    (onDeleteMessage)="deleteComment(comment)" (onUndoDeleteMessage)="undoDeleteComment(comment)">
-                </core-message>
+                    (onDeleteMessage)="deleteComment(comment)" (onUndoDeleteMessage)="undoDeleteComment(comment)" />
             </ng-container>
 
             <ion-badge class="ion-text-wrap" color="info" *ngIf="hasOffline">
-                <ion-icon name="fas-triangle-exclamation" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" aria-hidden="true" />
                 {{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
             </ion-badge>
             <core-message *ngIf="hasOffline && offlineComment" [message]="offlineComment" [text]="offlineComment.content"
                 [user]="offlineComment" [showDelete]="showDelete" [contextLevel]="contextLevel" [instanceId]="instanceId"
-                [courseId]="courseId" (onDeleteMessage)="deleteComment(offlineComment)">
-            </core-message>
+                [courseId]="courseId" (onDeleteMessage)="deleteComment(offlineComment)" />
         </ion-list>
 
     </core-loading>
@@ -67,7 +61,6 @@
 <ion-footer class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
     <ion-toolbar>
         <core-send-message-form [sendDisabled]="sending" [message]="newComment" (onSubmit)="addComment($event)"
-            [placeholder]="'core.comments.addcomment' | translate">
-        </core-send-message-form>
+            [placeholder]="'core.comments.addcomment' | translate" />
     </ion-toolbar>
 </ion-footer>
diff --git a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
index a78a68793..05bbb9ba3 100644
--- a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
+++ b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -20,12 +20,12 @@
                 </ion-label>
             </ion-item>
             <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" [detail]="false" button>
-                <core-user-avatar [site]="site" slot="start" [linkProfile]="false"></core-user-avatar>
+                <core-user-avatar [site]="site" slot="start" [linkProfile]="false" />
 
                 <ion-label>
                     <p class="item-heading">{{site.fullname}}</p>
                     <p>
-                        <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+                        <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id" />
                     </p>
                     <p *ngIf="displaySiteUrl">{{site.siteUrl}}</p>
                 </ion-label>
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 af97aedcc..6030b40f0 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -1,6 +1,6 @@
 <core-navbar-buttons slot="end" prepend>
     <ion-button fill="clear" (click)="gotoCourseDownloads()" [attr.aria-label]="'addon.storagemanager.coursedownloads' | translate">
-        <ion-icon name="fas-cloud-arrow-down" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-cloud-arrow-down" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 <core-dynamic-component [component]="courseFormatComponent" [data]="data">
@@ -10,10 +10,9 @@
         <!-- Single section. -->
         <div *ngIf="selectedSection && selectedSection.id !== allSectionsId">
             <core-dynamic-component [component]="singleSectionComponent" [data]="data">
-                <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}"></ng-container>
+                <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}" />
                 <core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
-                    [message]="'core.course.nocontentavailable' | translate">
-                </core-empty-box>
+                    [message]="'core.course.nocontentavailable' | translate" />
             </core-dynamic-component>
         </div>
 
@@ -22,26 +21,24 @@
             <core-dynamic-component [component]="allSectionsComponent" [data]="data">
                 <ng-container *ngFor="let section of sections; index as i">
                     <ng-container *ngIf="i <= lastShownSectionIndex">
-                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
+                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}" />
                     </ng-container>
                 </ng-container>
             </core-dynamic-component>
 
-            <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />
         </div>
         <div collapsible-footer appearOnBottom *ngIf="displayCourseIndex && (previousSection || nextSection)" slot="fixed">
             <div class="core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width">
                 <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
                     [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
-                    <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
-                    <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
+                    <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true" />
+                    <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                 </ion-button>
                 <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
                     [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
-                    <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
-                    <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
+                    <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id" />
+                    <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true" />
                 </ion-button>
             </div>
         </div>
@@ -50,14 +47,13 @@
 
 
 <core-block-side-blocks-button slot="fixed" *ngIf="loaded && course && displayBlocks && hasBlocks" contextLevel="course"
-    [instanceId]="course.id">
-</core-block-side-blocks-button>
+    [instanceId]="course.id" />
 
 <!-- Course Index button. -->
 <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && displayCourseIndex">
     <ion-fab-button (click)="openCourseIndex()" [userTour]="courseIndexTour" [attr.aria-label]="'core.course.courseindex' | translate"
         color="secondary">
-        <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-list-ul" aria-hidden="true" />
         <span class="sr-only">{{'core.course.courseindex' | translate }}</span>
     </ion-fab-button>
 </ion-fab>
@@ -70,8 +66,7 @@
         <ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
             <ion-label>
                 <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
-                    <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
+                    <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
                 </h2>
                 <div *ngIf="section.visible === 0 && section.uservisible !== false">
                     <ion-badge color="warning">
@@ -85,10 +80,9 @@
                 </div>
                 <div *ngIf="section.availabilityinfo">
                     <ion-chip class="clickable">
-                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                         <ion-label>
-                            <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id">
-                            </core-format-text>
+                            <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
                         </ion-label>
                     </ion-chip>
                 </div>
@@ -98,8 +92,7 @@
 
         <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
             <ion-label>
-                <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
-                </core-format-text>
+                <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
             </ion-label>
         </ion-item>
 
@@ -107,8 +100,7 @@
             <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
                 [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
                 [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
-                    !viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)">
-            </core-course-module>
+                    !viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
         </ng-container>
     </section>
 </ng-template>
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 efc764d56..74fbd8a65 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -19,8 +19,7 @@
                     [detail]="false">
                     <ion-label>
                         <h2>
-                            <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
-                            </core-format-text>
+                            <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id" />
                         </h2>
                     </ion-label>
                 </ion-item>
@@ -32,23 +31,21 @@
                             class="expandable-status-icon" (ariaButtonClick)="toggleExpand($event, section)"
                             [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                             [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
-                            [class.expandable-status-icon-expanded]="section.expanded">
-                        </ion-icon>
-                        <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
-                        </ion-icon>
+                            [class.expandable-status-icon-expanded]="section.expanded" />
+                        <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true"
+                            class="expandable-status-icon" />
                         <ion-label>
                             <h2>
-                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
-                                </core-format-text>
+                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id" />
                             </h2>
                         </ion-label>
                         <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
                         <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
-                            [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                            [attr.aria-label]="'core.restricted' | translate" />
                         <ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
-                            [attr.aria-label]="'core.notavailable' | translate"></ion-icon>
+                            [attr.aria-label]="'core.notavailable' | translate" />
                         <ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
-                            [attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
+                            [attr.aria-label]="'core.course.hiddenfromstudents' | translate" />
                     </ion-item>
                     <div id="core-course-index-section-{{section.id}}">
                         <ng-container *ngIf="section.expanded">
@@ -57,27 +54,23 @@
                                     [class.item-hightlighted]="section.highlighted"
                                     (click)="selectSectionOrModule($event, section.id, module.id)" button>
                                     <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
-                                        slot="start" aria-hidden="true"></ion-icon>
+                                        slot="start" aria-hidden="true" />
                                     <ion-icon class="completioninfo completion_incomplete" name="far-circle"
                                         *ngIf="module.completionStatus === 0" slot="start"
-                                        [attr.aria-label]="'core.course.todo' | translate">
-                                    </ion-icon>
+                                        [attr.aria-label]="'core.course.todo' | translate" />
                                     <ion-icon class="completioninfo completion_complete" name="fas-circle"
                                         *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
-                                        [attr.aria-label]="'core.course.done' | translate">
-                                    </ion-icon>
+                                        [attr.aria-label]="'core.course.done' | translate" />
                                     <ion-icon class="completioninfo completion_fail" name="fas-circle" *ngIf="module.completionStatus === 3"
-                                        color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate">
-                                    </ion-icon>
+                                        color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
                                     <ion-label>
                                         <p class="item-heading">
                                             <core-format-text [text]="module.name" contextLevel="module" [contextInstanceId]="module.id"
-                                                [courseId]="module.course">
-                                            </core-format-text>
+                                                [courseId]="module.course" />
                                         </p>
                                     </ion-label>
                                     <ion-icon name="fas-lock" *ngIf="!module.uservisible" slot="end" class="restricted"
-                                        [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                                        [attr.aria-label]="'core.restricted' | translate" />
                                 </ion-item>
                             </ng-container>
                         </ng-container>
diff --git a/src/core/features/course/components/module-completion-details/module-completion-details.html b/src/core/features/course/components/module-completion-details/module-completion-details.html
index 6ef5932eb..3d1805068 100644
--- a/src/core/features/course/components/module-completion-details/module-completion-details.html
+++ b/src/core/features/course/components/module-completion-details/module-completion-details.html
@@ -10,19 +10,19 @@
 
             <ng-container *ngIf="isTrackedUser">
                 <div *ngIf="rule.statusComplete" role="listitem" [attr.aria-label]="rule.accessibleDescription" class="text-success">
-                    <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-check" aria-hidden="true" />
                     <span class="sr-only">{{ 'core.course.completion_automatic:done' | translate }}</span>
                     {{ rule.rulevalue.description }}
                 </div>
 
                 <div *ngIf="rule.statusCompleteFail" role="listitem" [attr.aria-label]="rule.accessibleDescription" class="text-danger">
-                    <ion-icon name="fas-xmark" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-xmark" aria-hidden="true" />
                     <span class="sr-only">{{ 'core.course.completion_automatic:failed' | translate }}</span>
                     {{ rule.rulevalue.description }}
                 </div>
 
                 <div *ngIf="rule.statusIncomplete" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                    <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
                     <span class="sr-only">{{ 'core.course.completion_automatic:todo' | translate }}</span>
                     {{ rule.rulevalue.description }}
                 </div>
@@ -30,14 +30,14 @@
 
             <!-- Show only description (without status) to non-tracked users. -->
             <div *ngIf="!isTrackedUser" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
                 {{ rule.rulevalue.description }}
             </div>
         </ng-container>
 
         <!-- Show also manual completion description in the list to non-tracked users. -->
         <div *ngIf="isManual && !isTrackedUser" role="listitem" class="core-module-completion-todo">
-            <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true" />
             {{ 'core.course.completion_manual:markdone' | translate }}
         </div>
     </ion-list>
diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index 363b382bb..3162f135f 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -11,7 +11,7 @@
 
             <ion-button class="completioninfo completion_complete chip" color="success" (click)="completionClicked($event)"
                 *ngIf="completed">
-                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                 {{'core.course.done' | translate }}
                 <div class="select-icon" role="presentation" aria-hidden="true">
                     <div class="select-icon-inner"></div>
@@ -22,16 +22,16 @@
         <ng-container *ngIf="!completion.isautomatic">
             <ion-button *ngIf="completed" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
                 class="completioninfo completion_complete chip">
-                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                 {{ 'core.course.completion_manual:done' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
-                    [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
+                    [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
             </ion-button>
             <ion-button *ngIf="!completed" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
                 class="completioninfo completion_incomplete chip">
                 {{ 'core.course.completion_manual:markdone' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
-                    [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
+                    [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
             </ion-button>
         </ng-container>
     </ng-container>
diff --git a/src/core/features/course/components/module-description/core-course-module-description.html b/src/core/features/course/components/module-description/core-course-module-description.html
index 0ada00665..73b336347 100644
--- a/src/core/features/course/components/module-description/core-course-module-description.html
+++ b/src/core/features/course/components/module-description/core-course-module-description.html
@@ -2,8 +2,7 @@
     <ion-item class="ion-text-wrap">
         <ion-label>
             <core-format-text [text]="description" [component]="component" [componentId]="componentId" collapsible-item
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text>
+                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
         </ion-label>
     </ion-item>
     <ion-item class="ion-text-wrap" *ngIf="note">
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index 1ace5ddc0..e6674bba1 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -1,13 +1,11 @@
 <ion-item class="ion-text-wrap" collapsible>
-    <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
-    </core-mod-icon>
+    <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance" />
     <ion-label>
         <h1>
             <core-format-text [text]="module.name" contextLevel="module" [component]="component" [componentId]="componentId"
-                [contextInstanceId]="module.id" [courseId]="courseId">
-            </core-format-text>
+                [contextInstanceId]="module.id" [courseId]="courseId" />
             <ion-icon name="fas-lock" *ngIf="module.visible === 0 || module.uservisible === false"
-                [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                [attr.aria-label]="'core.restricted' | translate" />
         </h1>
         <ng-content select="[title]"></ng-content>
     </ion-label>
@@ -19,28 +17,25 @@
             module.completiondata && (module.completiondata.isautomatic || (showManualCompletion && module.uservisible))">
         <core-course-module-completion [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
             [showCompletionConditions]="true" [showManualCompletion]="showManualCompletion && module.uservisible"
-            (completionChanged)="completionChanged.emit($event)">
-        </core-course-module-completion>
+            (completionChanged)="completionChanged.emit($event)" />
     </div>
 
     <!-- Activity dates. -->
     <div *ngIf="module.dates && module.dates.length" class="core-module-dates core-module-info-box-section">
         <core-reminders-date *ngFor="let date of module.dates" [component]="component" [instanceId]="module.id" [type]="date.dataid"
-            [label]="date.label" [time]="date.timestamp" [relativeTo]="date.relativeto" [title]="module.name" [url]="module.url">
-        </core-reminders-date>
+            [label]="date.label" [time]="date.timestamp" [relativeTo]="date.relativeto" [title]="module.name" [url]="module.url" />
     </div>
 
     <!-- Availability info space. -->
     <div class="core-module-availabilityinfo core-module-info-box-section" *ngIf="showAvailabilityInfo && module.availabilityinfo">
-        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
-        </core-format-text>
+        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
+        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+            [courseId]="module.course" />
     </div>
 
     <div class="core-module-info-description core-module-info-box-section" *ngIf="description">
         <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-            [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : ''">
-        </core-format-text>
+            [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : ''" />
     </div>
     <ng-content select="[description]"></ng-content>
 </div>
@@ -50,7 +45,7 @@
 <!-- Activity has something offline. -->
 <ion-card class="core-warning-card" *ngIf="hasDataToSync">
     <ion-item>
-        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
         <ion-label>{{ 'core.hasdatatosync' | translate: {$a: moduleNameTranslated} }}</ion-label>
     </ion-item>
 </ion-card>
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index 837781567..928f43f99 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -2,16 +2,16 @@
     <ng-container *ngIf="completion.istrackeduser">
         <ion-button *ngIf="completion.state" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
             class="ion-text-wrap chip">
-            <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-check" slot="start" aria-hidden="true" />
             {{ 'core.course.completion_manual:done' | translate }}
             <ion-icon *ngIf="completion?.offline" name="fas-arrows-rotate"
-                [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
+                [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
         </ion-button>
         <ion-button *ngIf="!completion.state" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
             class="ion-text-wrap chip">
             {{ 'core.course.completion_manual:markdone' | translate }}
             <ion-icon *ngIf="completion?.offline" name="fas-arrows-rotate"
-                [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
+                [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
         </ion-button>
     </ng-container>
 
diff --git a/src/core/features/course/components/module-navigation/core-course-module-navigation.html b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
index 67afb3dc5..e31a325ab 100644
--- a/src/core/features/course/components/module-navigation/core-course-module-navigation.html
+++ b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
@@ -3,14 +3,14 @@
         <ion-col size="6" class="ion-no-padding core-course-module-navigation-arrow">
             <ion-button fill="clear" class="core-course-previous-module ion-text-wrap" [disabled]="!previousModule"
                 (click)="goToActivity(false)">
-                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                 <div class="button-text">{{ 'core.course.previousactivity' | translate }}</div>
             </ion-button>
         </ion-col>
         <ion-col size="6" class="ion-no-padding core-course-module-navigation-arrow">
             <ion-button fill="clear" class="core-course-next-module ion-text-wrap" [disabled]=" !nextModule" (click)="goToActivity(true)">
                 <div class="button-text">{{ 'core.course.nextactivity' | translate }}</div>
-                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
             </ion-button>
         </ion-col>
     </ion-row>
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index 0d6d0e6b6..9d862340d 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -15,31 +15,28 @@
             <ion-label>
                 <p *ngIf="moduleNameTranslated" class="core-modulename">
                     <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance"
-                        [fallbackTranslation]="module.modplural">
-                    </core-mod-icon>
+                        [fallbackTranslation]="module.modplural" />
                     {{moduleNameTranslated}}
                 </p>
                 <h1>
                     <core-format-text [text]="module.name" contextLevel="module" [component]="component" [componentId]="componentId"
-                        [contextInstanceId]="module.id" [courseId]="courseId">
-                    </core-format-text>
+                        [contextInstanceId]="module.id" [courseId]="courseId" />
                 </h1>
             </ion-label>
             <ion-button fill="clear" *ngIf="displayOptions.displayOpenInBrowser && externalUrl" [href]="externalUrl" core-link
                 [showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
-                <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-item>
 
         <ion-item class="ion-text-wrap" *ngIf="course" (click)="openCourse()" button [detail]="true" lines="full">
             <ion-label>
                 <p class="item-heading">
-                    <ion-icon name="fas-graduation-cap" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-graduation-cap" aria-hidden="true" />
                     {{ 'core.course' | translate}}
                 </p>
                 <p>
-                    <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
-                    </core-format-text>
+                    <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId" />
                 </p>
             </ion-label>
         </ion-item>
@@ -50,8 +47,7 @@
                     {{ 'core.description' | translate}}
                 </p>
                 <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-                    [contextInstanceId]="module.id" [courseId]="courseId" collapsible-item>
-                </core-format-text>
+                    [contextInstanceId]="module.id" [courseId]="courseId" collapsible-item />
             </ion-label>
         </ion-item>
 
@@ -60,7 +56,7 @@
                 <ion-item lines="full" class="ion-text-wrap card-header">
                     <ion-label>
                         <h2>
-                            <ion-icon name="fas-chart-bar" slot="end" aria-hidden="true"></ion-icon>{{ 'core.grades.gradebook' | translate
+                            <ion-icon name="fas-chart-bar" slot="end" aria-hidden="true" />{{ 'core.grades.gradebook' | translate
                             }}
                         </h2>
                     </ion-label>
@@ -70,12 +66,10 @@
                         [attr.aria-label]="(grade.expanded ? 'core.collapse' : 'core.expand') | translate"
                         [attr.aria-expanded]="grade.expanded" [attr.aria-controls]="'grade-'+grade.id" role="heading" [detail]="false">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                            [class.expandable-status-icon-expanded]="grade.expanded">
-                        </ion-icon>
+                            [class.expandable-status-icon-expanded]="grade.expanded" />
                         <ion-label>
                             <p class="item-heading" *ngIf="!grade.itemmodule">
-                                <core-format-text [text]="grade.gradeitem" contextLevel="course" [contextInstanceId]="courseId">
-                                </core-format-text>
+                                <core-format-text [text]="grade.gradeitem" contextLevel="course" [contextInstanceId]="courseId" />
                             </p>
                             <p class="item-heading" *ngIf="grade.itemmodule">
                                 {{ 'core.grades.grade' | translate }}
@@ -85,11 +79,10 @@
                                 {{ 'core.grades.notgraded' | translate }}
                             </ion-badge>
                         </ion-label>
-                        <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" slot="end" [attr.aria-label]="grade.iconAlt">
-                        </ion-icon>
+                        <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" slot="end" [attr.aria-label]="grade.iconAlt" />
                         <img *ngIf="grade.image && !grade.itemmodule" [src]="grade.image" slot="end" [alt]="grade.iconAlt" />
-                        <ion-icon *ngIf="grade.image && grade.itemmodule" name="fas-chart-bar" slot="end" [attr.aria-label]="grade.iconAlt">
-                        </ion-icon>
+                        <ion-icon *ngIf="grade.image && grade.itemmodule" name="fas-chart-bar" slot="end"
+                            [attr.aria-label]="grade.iconAlt" />
                     </ion-item>
                     <div *ngIf="grade.expanded" [id]="'grade-'+grade.id">
                         <ion-item class="ion-text-wrap" *ngIf="grade.weight?.length > 0 && grade.weight !== '-'">
@@ -138,8 +131,7 @@
                                 <p class="item-heading">{{ 'core.grades.feedback' | translate}}</p>
                                 <p>
                                     <core-format-text collapsible-item [text]="grade.feedback" contextLevel="course"
-                                        [contextInstanceId]="courseId">
-                                    </core-format-text>
+                                        [contextInstanceId]="courseId" />
                                 </p>
                             </ion-label>
                         </ion-item>
@@ -160,7 +152,7 @@
             <ion-item lines="full" class="ion-text-wrap card-header">
                 <ion-label>
                     <h2>
-                        <ion-icon name="fas-cloud-arrow-down" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-cloud-arrow-down" aria-hidden="true" />
                         {{ 'addon.storagemanager.downloads' | translate }}
                     </h2>
                 </ion-label>
@@ -172,9 +164,9 @@
                 </ion-label>
                 <ion-button *ngIf="!removeFilesLoading" [disabled]="prefetchLoading" (click)="removeFiles()" color="danger" fill="clear"
                     [attr.aria-label]="'core.clearstoreddata' | translate:{$a: size | coreBytesToSize}" slot="end">
-                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
-                <ion-spinner *ngIf="removeFilesLoading" slot="end" aria-hidden="true"></ion-spinner>
+                <ion-spinner *ngIf="removeFilesLoading" slot="end" aria-hidden="true" />
             </ion-item>
             <ion-item *ngIf="downloadTimeReadable" class="ion-text-wrap">
                 <ion-label>
@@ -183,8 +175,8 @@
             </ion-item>
             <ion-button fill="outline" expand="block" *ngIf="canPrefetch && displayOptions.displayPrefetch" class="ion-text-wrap"
                 (click)="prefetch()" [disabled]="prefetchDisabled">
-                <ion-icon *ngIf="!prefetchLoading" name="fas-cloud-arrow-down" slot="start" aria-hidden="true"></ion-icon>
-                <ion-spinner *ngIf="prefetchLoading" slot="start" aria-hidden="true"></ion-spinner>
+                <ion-icon *ngIf="!prefetchLoading" name="fas-cloud-arrow-down" slot="start" aria-hidden="true" />
+                <ion-spinner *ngIf="prefetchLoading" slot="start" aria-hidden="true" />
                 <ion-label>
                     {{ 'core.download' | translate }}
                 </ion-label>
@@ -192,7 +184,7 @@
         </ion-card>
 
         <ion-item button *ngIf="blog && displayOptions.displayBlog" (click)="gotoBlog()" [detail]="true">
-            <ion-icon name="far-newspaper" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="far-newspaper" slot="start" aria-hidden="true" />
             <ion-label>
                 {{ 'addon.blog.blog' | translate }}
             </ion-label>
@@ -201,14 +193,14 @@
 </ion-content>
 <ion-footer *ngIf="loaded && isOnline && displayOptions.displayRefresh">
     <ion-button class="ion-margin" *ngIf="!hasOffline" (click)="refresh()" expand="block" fill="outline">
-        <ion-icon name="fas-rotate-right" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-rotate-right" slot="start" aria-hidden="true" />
         <ion-label>
             {{ 'core.refresh' | translate }}
         </ion-label>
     </ion-button>
 
     <ion-button class="ion-margin" *ngIf="hasOffline" (click)="sync()" expand="block" fill="outline">
-        <ion-icon name="fas-rotate" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-rotate" slot="start" aria-hidden="true" />
         <ion-label>
             {{ 'core.settings.synchronizenow' | translate }}
         </ion-label>
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 b1f674f9f..d4f3da3c6 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -8,27 +8,25 @@
             <ion-label>
                 <div class="activity-main">
                     <core-mod-icon *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
-                        [componentId]="module.instance" [fallbackTranslation]="module.modplural">
-                    </core-mod-icon>
+                        [componentId]="module.instance" [fallbackTranslation]="module.modplural" />
                     <div class="activity-title">
                         <p class="item-heading">
                             <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
-                                [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
-                            </core-format-text>
+                                [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated" />
                             <ion-icon name="fas-lock" *ngIf="module.visible === 0 || module.uservisible === false"
-                                [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                                [attr.aria-label]="'core.restricted' | translate" />
                             <ion-icon *ngIf="prefetchStatusIcon$ | async as prefetchStatusIcon" [name]="prefetchStatusIcon" color="success"
-                                [attr.aria-label]="((prefetchStatusText$ | async) || '') | translate"></ion-icon>
+                                [attr.aria-label]="((prefetchStatusText$ | async) || '') | translate" />
                         </p>
 
                         <div class="core-module-additional-info" *ngIf="module.visible === 0 || (module.visible !== 0 && module.isStealth)">
                             <!-- Hidden badges -->
                             <ion-badge color="secondary" *ngIf="module.visible === 0" class="ion-text-wrap">
-                                <ion-icon name="far-eye-slash" aria-hidden="true"></ion-icon>
+                                <ion-icon name="far-eye-slash" aria-hidden="true" />
                                 {{ 'core.course.hiddenfromstudents' | translate }}
                             </ion-badge>
                             <ion-badge color="secondary" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
-                                <ion-icon name="fas-eye-low-vision" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-eye-low-vision" aria-hidden="true" />
                                 {{ 'core.course.hiddenoncoursepage' | translate }}
                             </ion-badge>
                         </div>
@@ -38,20 +36,18 @@
                         <!-- Module completion (legacy). -->
                         <core-course-module-completion-legacy *ngIf="module.completiondata && showLegacyCompletion"
                             [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
-                            (completionChanged)="completionChanged.emit($event)">
-                        </core-course-module-completion-legacy>
+                            (completionChanged)="completionChanged.emit($event)" />
 
                         <!-- Activity completion. For tablets -->
                         <core-course-module-completion *ngIf="hasCompletion && !showLegacyCompletion" [completion]="module.completiondata"
                             [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
-                            [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
-                        </core-course-module-completion>
+                            [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" />
 
                         <!-- Button defined by the module handler. -->
                         <ion-button fill="clear" class="core-module-button-more core-animate-show-hide" *ngIf="module.handlerData.button"
                             [hidden]="module.handlerData.button.hidden || module.handlerData.spinner" (click)="buttonClicked($event)"
                             [attr.aria-label]="module.handlerData.button.label | translate:{$a: module.handlerData.title}">
-                            <ion-icon [name]="module.handlerData.button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon [name]="module.handlerData.button.icon" slot="icon-only" aria-hidden="true" />
                         </ion-button>
 
                         <!-- @deprecated since 4.3. Buttons defined by the module handler. -->
@@ -59,7 +55,7 @@
                             *ngIf="!module.handlerData.button && module.handlerData.buttons &&  module.handlerData.buttons[0]"
                             [hidden]="module.handlerData.buttons[0].hidden || module.handlerData.spinner" (click)="buttonClicked($event)"
                             [attr.aria-label]="module.handlerData.buttons[0].label | translate:{$a: module.handlerData.title}">
-                            <ion-icon [name]="module.handlerData.buttons[0].icon" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon [name]="module.handlerData.buttons[0].icon" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </div>
                 </div>
@@ -67,31 +63,27 @@
                 <!-- Activity dates. -->
                 <div *ngIf="showActivityDates && module.dates?.length" class="activity-dates activity-extra">
                     <core-reminders-date *ngFor="let date of module.dates" [type]="date.id" [label]="date.label" [time]="date.timestamp"
-                        [relativeTo]="date.relativeto">
-                    </core-reminders-date>
+                        [relativeTo]="date.relativeto" />
                 </div>
 
                 <!-- Activity completion. -->
                 <core-course-module-completion class="activity-extra" *ngIf="hasCompletion && !showLegacyCompletion"
                     [completion]="module.completiondata" [moduleName]="module.name" [moduleId]="module.id"
                     [showCompletionConditions]="showCompletionConditions" [showManualCompletion]="showManualCompletion"
-                    (completionChanged)="completionChanged.emit($event)">
-                </core-course-module-completion>
+                    (completionChanged)="completionChanged.emit($event)" />
 
 
                 <!-- Description and restrictions -->
                 <div *ngIf="module.description || (showAvailability && module.availabilityinfo)" id="activity-{{module.id}}-collapsible"
                     class="ion-text-wrap activity-description-availabilityinfo activity-extra" [collapsible-item]="64">
                     <core-format-text class="core-module-description" *ngIf="module.description" [text]="module.description"
-                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
-                    </core-format-text>
+                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course" />
 
                     <!-- Availability info -->
                     <div *ngIf="showAvailability && module.availabilityinfo" class="core-module-availabilityinfo">
-                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                         <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="module.course">
-                        </core-format-text>
+                            [courseId]="module.course" />
                     </div>
                 </div>
 
@@ -102,7 +94,7 @@
         </ion-item>
 
         <div class="core-course-last-module-viewed" *ngIf="isLastViewed">
-            <ion-icon name="fas-eye" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-eye" aria-hidden="true" />
             {{ 'core.course.lastaccessedactivity' | translate }}
         </div>
     </ng-container>
@@ -111,7 +103,7 @@
     <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap core-module-loading"
         [attr.aria-label]="module.handlerData.a11yTitle" [detail]="false">
         <ion-label>
-            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            <ion-spinner [attr.aria-label]="'core.loading' | translate" />
         </ion-label>
     </ion-item>
 </ion-card>
diff --git a/src/core/features/course/components/tag-area/core-course-tag-area.html b/src/core/features/course/components/tag-area/core-course-tag-area.html
index 4fc9e95a8..efaffb04e 100644
--- a/src/core/features/course/components/tag-area/core-course-tag-area.html
+++ b/src/core/features/course/components/tag-area/core-course-tag-area.html
@@ -1,6 +1,6 @@
 <ion-card *ngFor="let item of items">
     <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button [detail]="true">
-        <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true" />
         <ion-label>
             <p class="item-heading">{{ item.courseName }}</p>
             <p *ngIf="item.categoryName">{{ 'core.category' | translate }}: {{ item.categoryName }}</p>
diff --git a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
index 5503b295f..0c24606d1 100644
--- a/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
+++ b/src/core/features/course/components/unsupported-module/core-course-unsupported-module.html
@@ -1,7 +1,7 @@
 <div class="has-spacer">
     <ion-card class="core-danger-card">
         <ion-item>
-            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
             <ion-label>
                 <p><strong>{{ 'core.uhoh' | translate }} </strong>
                     <ng-container *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</ng-container>
@@ -18,7 +18,7 @@
             <p>{{ 'core.course.useactivityonbrowser' | translate }}</p>
             <ion-button expand="block" [href]="module?.url" core-link [showBrowserWarning]="false">
                 {{ 'core.openinbrowser' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
             </ion-button>
         </ion-label>
     </ion-item>
diff --git a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
index 342f17c3e..2e960aa88 100644
--- a/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
+++ b/src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html
@@ -1,3 +1,3 @@
 <div class="list-item-limited-width">
-    <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+    <core-dynamic-component [component]="componentClass" [data]="data" />
 </div>
diff --git a/src/core/features/course/pages/contents/contents.html b/src/core/features/course/pages/contents/contents.html
index 30246dd99..b5dd06beb 100644
--- a/src/core/features/course/pages/contents/contents.html
+++ b/src/core/features/course/pages/contents/contents.html
@@ -1,12 +1,11 @@
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!dataLoaded || updatingData || !displayRefresher" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="dataLoaded && !updatingData">
         <core-course-format [course]="course" [sections]="sections" [initialSectionId]="sectionId" [initialSectionNumber]="sectionNumber"
             [initialBlockInstanceId]="blockInstanceId" [moduleId]="moduleId" class="core-course-format-{{course.format}}"
-            *ngIf="dataLoaded && sections" [isGuest]="isGuest">
-        </core-course-format>
+            *ngIf="dataLoaded && sections" [isGuest]="isGuest" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index bded5b685..bf8bd280a 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -1,26 +1,24 @@
 <ion-header class="no-title">
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
-        <ion-title>
-        </ion-title>
+        <ion-title />
         <ion-buttons slot="end" *ngIf="isModal">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
         <div *ngIf="course" class="core-course-thumb" #courseThumb>
             <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
-            <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
-            </ion-icon>
+            <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true" />
         </div>
         <div *ngIf="course" class="course-container">
             <div class="list-item-limited-width">
@@ -28,43 +26,37 @@
                     <ion-label>
                         <p *ngIf="course.displayname && course.shortname && course.fullname !== course.displayname"
                             class="core-course-shortname">
-                            <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
-                            </core-format-text>
+                            <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id" />
                         </p>
                         <h1>
                             <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
-                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
-                            </core-format-text>
+                            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id" />
                         </h1>
                         <ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
                             <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
                             <ion-label>
                                 <core-format-text [text]="course.categoryname" contextLevel="coursecat"
-                                    [contextInstanceId]="course.categoryid">
-                                </core-format-text>
+                                    [contextInstanceId]="course.categoryid" />
                             </ion-label>
                         </ion-chip>
                     </ion-label>
                     <ion-button *ngIf="displayOpenInBrowser" fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
                         [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
-                        <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="progress !== undefined || course.startdate || course.enddate">
                     <ion-label>
                         <div class="core-course-progress" *ngIf="progress !== undefined">
-                            <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
-                            </core-progress-bar>
+                            <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress" />
                         </div>
                         <div *ngIf="course.startdate || course.enddate" class="core-course-dates">
                             <core-reminders-date *ngIf="course.startdate" component="course" [instanceId]="course.id" type="coursestart"
                                 [label]="'core.course.startdate' | translate" [time]="course.startdate" [title]="course.fullname"
-                                [url]="courseUrl">
-                            </core-reminders-date>
+                                [url]="courseUrl" />
                             <core-reminders-date *ngIf="course.enddate" component="course" [instanceId]="course.id" type="courseend"
                                 [label]="'core.course.enddate' | translate" [time]="course.enddate" [title]="course.fullname"
-                                [url]="courseUrl">
-                            </core-reminders-date>
+                                [url]="courseUrl" />
                         </div>
                     </ion-label>
                 </ion-item>
@@ -74,8 +66,7 @@
                         <h2 class="item-heading">
                             {{'core.course.coursesummary' | translate}}
                         </h2>
-                        <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
-                        </core-format-text>
+                        <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id" />
                     </ion-label>
                 </ion-item>
 
@@ -83,8 +74,7 @@
                     <ion-item [button]="course.contacts.length >= 5" class="ion-text-wrap" (click)="toggleContacts()"
                         [attr.aria-label]="(contactsExpanded ? 'core.collapse' : 'core.expand') | translate" [detail]="false">
                         <ion-icon *ngIf="course.contacts.length >= 5" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                            class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded">
-                        </ion-icon>
+                            class="expandable-status-icon" [class.expandable-status-icon-expanded]="contactsExpanded" />
                         <ion-label>
                             <h2 class="item-heading">
                                 {{ 'core.teachers' | translate }}
@@ -95,14 +85,13 @@
                         <ion-item button class="ion-text-wrap" *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id"
                             [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate" [detail]="true">
                             <core-user-avatar [user]="contact" slot="start" [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"
-                                [linkProfile]="false">
-                            </core-user-avatar>
+                                [linkProfile]="false" />
                             <ion-label>
                                 <p class="item-heading">{{contact.fullname}}</p>
                             </ion-label>
                         </ion-item>
                     </ng-container>
-                    <core-spacer></core-spacer>
+                    <core-spacer />
                 </ion-list>
 
                 <ion-item class="ion-text-wrap" *ngIf="course.customfields">
@@ -111,14 +100,12 @@
                             <div *ngIf="field.value"
                                 class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
                                 <span class="core-customfieldname">
-                                    <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id">
-                                    </core-format-text>
+                                    <core-format-text [text]="field.name" contextLevel="course" [contextInstanceId]="course.id" />
                                     <span class="core-customfieldseparator">: </span>
                                 </span>
                                 <span class="core-customfieldvalue">
                                     <core-format-text [text]="field.value" [collapsible-item]="field.type === 'textarea'  ? '' : null"
-                                        contextLevel="course" [contextInstanceId]="course.id">
-                                    </core-format-text>
+                                        contextLevel="course" [contextInstanceId]="course.id" />
                                 </span>
                             </div>
                         </ng-container>
@@ -134,7 +121,7 @@
         <ng-container *ngIf="canAccessCourse">
             <ion-button *ngFor="let item of courseMenuHandlers" (click)="openMenuItem(item)" [class]="'ion-text-wrap '+ item.data.class"
                 expand="block">
-                <ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="item.data.icon" [name]="item.data.icon" slot="start" aria-hidden="true" />
                 <ion-label>{{item.data.title | translate }}</ion-label>
             </ion-button>
         </ng-container>
@@ -145,13 +132,13 @@
 
             <ion-card class="core-info-card ion-text-wrap" *ngIf="!selfEnrolInstances.length && !hasBrowserEnrolments">
                 <ion-item>
-                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                     <ion-label>{{ 'core.courses.notenrollable' | translate }}</ion-label>
                 </ion-item>
             </ion-card>
         </ng-container>
         <ion-button (click)="openCourse()" *ngIf="!isModal && canAccessCourse" expand="block" fill="outline" class="ion-text-wrap">
-            <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-eye" slot="start" aria-hidden="true" />
             {{ 'core.course.viewcourse' | translate }}
         </ion-button>
     </div>
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index a07c35d1d..5b17a3397 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -1,20 +1,20 @@
 <ion-header [collapsible]="(tabsComponent?.selectedIndex === 0 || tabsComponent?.selectedIndex === undefined) && !fullScreenEnabled">
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
+                <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id" />
             </h1>
         </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openCourseSummary()" [attr.aria-label]="'core.course.coursesummary' | translate">
-                <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+                <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></core-context-menu>
+            <core-context-menu />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
@@ -22,8 +22,7 @@
     <ion-item class="core-format-progress-list ion-text-wrap list-item-limited-width" collapsible>
         <ng-container *ngIf="course">
             <div *ngIf="!course.courseimage" #courseThumb slot="start" class="core-course-thumb">
-                <ion-icon name="fas-graduation-cap" class="course-icon" aria-hidden="true">
-                </ion-icon>
+                <ion-icon name="fas-graduation-cap" class="course-icon" aria-hidden="true" />
             </div>
             <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
                 <img [src]="course.courseimage" core-external-content alt="" />
@@ -32,13 +31,12 @@
 
         <ion-label>
             <h1>
-                <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
+                <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="course?.id" />
             </h1>
             <div class="core-course-progress" *ngIf="progress !== undefined">
-                <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
-                </core-progress-bar>
+                <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress" />
             </div>
         </ion-label>
     </ion-item>
 </div>
-<core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()"></core-tabs-outlet>
+<core-tabs-outlet [tabs]="tabs" [hideUntil]="loaded" (ionChange)="tabSelected()" />
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 92d8c00f1..ce6264820 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
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
@@ -10,11 +10,11 @@
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <core-empty-box *ngIf="!sections || !sections.length" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!sections || !sections.length" icon="fas-box-open"
+            [message]="'core.course.nocontentavailable' | translate" />
 
         <ion-list class="core-course-module-list-wrapper">
             <ng-container *ngFor="let section of sections; index as i">
@@ -22,19 +22,17 @@
                     <ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
                         <ion-label>
                             <h2>
-                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId">
-                                </core-format-text>
+                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId" />
                             </h2>
                         </ion-label>
                     </ion-item-divider>
                     <ng-container *ngFor="let module of section.modules">
                         <core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
-                            [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false">
-                        </core-course-module>
+                            [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false" />
                     </ng-container>
                 </ng-container>
             </ng-container>
         </ion-list>
-        <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index c6e3cb528..95c3f03e1 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -1,29 +1,28 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
             </h1>
         </ion-title>
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="displayOpenInBrowser && module.url && module.uservisible && !unsupported" [href]="module.url"
                 core-link [showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate">
-                <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
-                <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="has-spacer">
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
@@ -36,19 +35,19 @@
 
                 <!-- Hidden badges -->
                 <ion-badge color="secondary" *ngIf="module.visible === 0" class="ion-text-wrap">
-                    <ion-icon name="far-eye-slash" aria-hidden="true"></ion-icon>
+                    <ion-icon name="far-eye-slash" aria-hidden="true" />
                     {{ 'core.course.hiddenfromstudents' | translate }}
                 </ion-badge>
                 <ion-badge color="secondary" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
-                    <ion-icon name="fas-eye-low-vision" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-eye-low-vision" aria-hidden="true" />
                     {{ 'core.course.hiddenoncoursepage' | translate }}
                 </ion-badge>
             </div>
         </core-course-module-info>
 
-        <core-course-unsupported-module *ngIf="unsupported" [module]="module"></core-course-unsupported-module>
+        <core-course-unsupported-module *ngIf="unsupported" [module]="module" />
     </core-loading>
 
-    <core-course-module-navigation collapsible-footer appearOnBottom [hidden]="!loaded" [courseId]="courseId" [currentModuleId]="module.id">
-    </core-course-module-navigation>
+    <core-course-module-navigation collapsible-footer appearOnBottom [hidden]="!loaded" [courseId]="courseId"
+        [currentModuleId]="module.id" />
 </ion-content>
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index b823ac7ae..777234016 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -4,26 +4,25 @@
 
     <div *ngIf="layout === 'card' || layout === 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseimage">
         <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
-        <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
-        </ion-icon>
+        <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true" />
     </div>
 
     <ng-container *ngIf="isEnrolled && layout !== 'summarycard'">
         <div class="core-button-spinner" *ngIf="!courseOptionMenuEnabled && showDownload">
             <core-download-refresh [status]="prefetchCourseData.status" [enabled]="showDownload"
                 [statusTranslatable]="prefetchCourseData.statusTranslatable" [canTrustDownload]="false"
-                [loading]="prefetchCourseData.loading" (action)="prefetchCourse()"></core-download-refresh>
+                [loading]="prefetchCourseData.loading" (action)="prefetchCourse()" />
         </div>
 
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
             <!-- Options menu. -->
             <ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
                 [attr.aria-label]="('core.displayoptions' | translate)">
-                <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
             </ion-button>
 
             <!-- Loading options course spinner. -->
-            <ion-spinner *ngIf="showSpinner" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            <ion-spinner *ngIf="showSpinner" [attr.aria-label]="'core.loading' | translate" />
         </div>
     </ng-container>
 
@@ -31,8 +30,7 @@
 
         <ng-container *ngIf="layout === 'list' || layout === 'listwithenrol'">
             <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
-                aria-hidden="true">
-            </ion-icon>
+                aria-hidden="true" />
             <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
                 <img [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
             </ion-avatar>
@@ -42,35 +40,30 @@
             <div class="core-course-maininfo">
                 <p *ngIf="course.displayname && course.shortname && course.fullname !== course.displayname"
                     class="core-course-shortname core-course-additional-info">
-                    <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
+                    <core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id" />
                 </p>
 
                 <p class="item-heading">
-                    <ion-icon name="fas-star" *ngIf="course.isfavourite" [attr.aria-label]="'core.courses.favourite' | translate">
-                    </ion-icon>
+                    <ion-icon name="fas-star" *ngIf="course.isfavourite" [attr.aria-label]="'core.courses.favourite' | translate" />
                     <span class="sr-only" *ngIf="course.isfavourite">{{ 'core.courses.aria:favourite' | translate }}</span>
 
                     <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
-                    <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
-                    </core-format-text>
+                    <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id" />
 
                     <span *ngIf="(layout === 'list' || layout === 'listwithenrol') && !isEnrolled" class="core-course-enrol-icons">
                         <ion-icon *ngFor="let icon of enrolmentIcons" color="medium" [name]="icon.icon" [title]="icon.label | translate"
-                            [attr.aria-label]="icon.label | translate" [ngClass]="[icon.className]">
-                        </ion-icon>
+                            [attr.aria-label]="icon.label | translate" [ngClass]="[icon.className]" />
                     </span>
 
                     <ion-icon *ngIf="prefetchCourseData.downloadSucceeded" class="core-icon-downloaded" name="fam-cloud-done"
-                        color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
+                        color="success" role="status" [attr.aria-label]="'core.downloaded' | translate" />
                 </p>
 
                 <ion-chip color="primary" *ngIf="course.categoryname"
                     class="core-course-category core-course-additional-info ion-text-nowrap">
                     <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
                     <ion-label>
-                        <core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
-                        </core-format-text>
+                        <core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid" />
                     </ion-label>
                 </ion-chip>
 
@@ -84,7 +77,7 @@
 
             <div *ngIf="layout !== 'summarycard' && isEnrolled && progress >= 0 && completionUserTracked !== false"
                 class="core-course-progress">
-                <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
+                <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress" />
             </div>
         </ion-label>
     </ion-item>
diff --git a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
index c7eb710b3..044336685 100644
--- a/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
+++ b/src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
@@ -1,39 +1,39 @@
 <ion-content>
     <ion-list>
         <ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
-            <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
-            <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            <ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true" />
+            <ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate" />
             <ion-label>
                 <p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="action('delete')" [detail]="false"
             *ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'">
-            <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
-            <ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-eye" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
-            <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-eye-slash" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.show' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
-            <ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-star" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
-            <ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="far-star" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
             </ion-label>
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 9e0388ac8..94f024f2c 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -1,3 +1,2 @@
 <core-courses-course-list-item [course]="course" class="core-course-progress" [showDownload]="showDownload"
-    [layout]="showAll ? 'card' : 'summarycard'">
-</core-courses-course-list-item>
+    [layout]="showAll ? 'card' : 'summarycard'" />
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index bdc86b61d..09e2de396 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -1,41 +1,39 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="title" contextLevel="coursecat" [contextInstanceId]="currentCategory && currentCategory!.id">
-                </core-format-text>
+                <core-format-text [text]="title" contextLevel="coursecat" [contextInstanceId]="currentCategory && currentCategory!.id" />
             </h1>
         </ion-title>
         <ion-buttons slot="end">
             <core-context-menu>
                 <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
                     [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()" iconAction="toggle"
-                    [(toggle)]="downloadEnabled"></core-context-menu-item>
+                    [(toggle)]="downloadEnabled" />
                 <core-context-menu-item [priority]="900" [content]="'core.courses.showonlyenrolled' | translate" (action)="filterEnrolled()"
-                    iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>
+                    iconAction="toggle" [(toggle)]="showOnlyEnrolled" />
             </core-context-menu>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!categoriesLoaded" (ionRefresh)="refreshCategories($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="categoriesLoaded">
         <ion-list class="list-item-limited-width">
             <ion-item *ngIf="currentCategory" class="ion-text-wrap">
-                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
+                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate" />
                 <ion-label>
                     <p class="item-heading">
-                        <core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id">
-                        </core-format-text>
+                        <core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id" />
                     </p>
                     <p *ngIf="currentCategory.description">
                         <core-format-text [text]="currentCategory.description" collapsible-item contextLevel="coursecat"
-                            [contextInstanceId]="currentCategory.id"></core-format-text>
+                            [contextInstanceId]="currentCategory.id" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -49,11 +47,10 @@
                 <ion-card *ngFor="let category of categories">
                     <ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name"
                         [detail]="true">
-                        <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
+                        <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate" />
                         <ion-label>
                             <p class="item-heading">
-                                <core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
-                                </core-format-text>
+                                <core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id" />
                             </p>
                         </ion-label>
                         <ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
@@ -71,12 +68,10 @@
                         <h2 *ngIf="showOnlyEnrolled" class="big">{{ 'core.courses.mycourses' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-                <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
-                </core-courses-course-list-item>
+                <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled" />
             </ng-container>
         </ion-list>
         <core-empty-box *ngIf="!categories.length && !courses.length" icon="fas-graduation-cap"
-            [message]="'core.courses.nocoursesyet' | translate">
-        </core-empty-box>
+            [message]="'core.courses.nocoursesyet' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
index 1d9fbece3..c1e4865f4 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.html
+++ b/src/core/features/courses/pages/dashboard/dashboard.html
@@ -1,24 +1,22 @@
 <core-navbar-buttons slot="end" prepend>
     <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshDashboard($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
         <ion-list class="list-item-limited-width" *ngIf="hasMainBlocks">
             <ng-container *ngFor="let block of blocks">
-                <core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId"></core-block>
+                <core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId" />
             </ng-container>
         </ion-list>
 
-        <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId">
-        </core-block-side-blocks-button>
+        <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId" />
 
-        <core-empty-box *ngIf="!hasMainBlocks" icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!hasMainBlocks" icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index 562940ca4..47b406bc2 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/src/core/features/courses/pages/list/list.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="!showOnlyEnrolled">{{ 'core.courses.availablecourses' | translate }}</h1>
@@ -11,22 +11,22 @@
             <core-context-menu>
                 <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
                     [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()" iconAction="toggle"
-                    [(toggle)]="downloadEnabled"></core-context-menu-item>
+                    [(toggle)]="downloadEnabled" />
                 <core-context-menu-item [priority]="900" [content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
-                    iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>
+                    iconAction="toggle" [(toggle)]="showOnlyEnrolled" />
             </core-context-menu>
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshCourses($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
 
     <core-search-box *ngIf="searchEnabled" (onSubmit)="search($event)" (onClear)="clearSearch()"
         [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" [autoFocus]="searchMode"
-        searchArea="CoreCoursesSearch"></core-search-box>
+        searchArea="CoreCoursesSearch" />
 
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="searchMode && searchTotal > 0">
@@ -38,20 +38,16 @@
         </ng-container>
 
         <ion-list class="list-item-limited-width">
-            <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
-            </core-courses-course-list-item>
+            <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled" />
         </ion-list>
 
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreCourses($event)" [error]="loadMoreError">
-        </core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreCourses($event)" [error]="loadMoreError" />
 
 
         <core-empty-box *ngIf="searchMode && !courses.length" icon="fas-magnifying-glass"
-            [message]="'core.courses.nosearchresults' | translate">
-        </core-empty-box>
+            [message]="'core.courses.nosearchresults' | translate" />
 
-        <core-empty-box *ngIf="!searchMode && !courses.length" icon="fas-graduation-cap" [message]="'core.courses.nocourses' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!searchMode && !courses.length" icon="fas-graduation-cap" [message]="'core.courses.nocourses' | translate" />
 
     </core-loading>
 </ion-content>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 83cc1fd54..de4cf18de 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -1,23 +1,22 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename">
-                </core-format-text>
+                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename" />
                 <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap divider">
@@ -31,8 +30,7 @@
                     <ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear"
                         (click)="myOverviewBlock.prefetchCourses()"
                         [attr.aria-label]="myOverviewBlock.prefetchCoursesData.statusTranslatable | translate">
-                        <ion-icon [name]="myOverviewBlock.prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
-                        </ion-icon>
+                        <ion-icon [name]="myOverviewBlock.prefetchCoursesData.icon" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                     <ion-badge class="core-course-download-courses-progress" *ngIf="myOverviewBlock.prefetchCoursesData.badge"
                         role="progressbar" [attr.aria-valuemax]="myOverviewBlock.prefetchCoursesData.total"
@@ -40,21 +38,18 @@
                         [attr.aria-valuetext]="myOverviewBlock.prefetchCoursesData.badgeA11yText">
                         {{myOverviewBlock.prefetchCoursesData.badge}}
                     </ion-badge>
-                    <ion-spinner *ngIf="myOverviewBlock.prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate">
-                    </ion-spinner>
+                    <ion-spinner *ngIf="myOverviewBlock.prefetchCoursesData.loading" [attr.aria-label]="'core.loading' | translate" />
                 </div>
             </div>
         </ion-item>
         <ion-list>
             <core-block *ngIf="loadedBlock?.visible" [block]="loadedBlock" contextLevel="user" [instanceId]="userId"
-                labelledBy="core-courses-my-title"></core-block>
+                labelledBy="core-courses-my-title" />
         </ion-list>
 
         <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId"
-            [myDashboardPage]="myPageCourses">
-        </core-block-side-blocks-button>
+            [myDashboardPage]="myPageCourses" />
 
-        <core-empty-box *ngIf="!loadedBlock" icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!loadedBlock" icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 023a13ea2..3e8d4cd0b 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -6,11 +6,10 @@
     </div>
 
     <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" role="textbox" [attr.name]="name" ngControl="control"
-        [placeholder]="placeholder" (ionChange)="onChange()" (ionFocus)="showToolbar($event)" (ionBlur)="hideToolbar($event)">
-    </ion-textarea>
+        [placeholder]="placeholder" (ionChange)="onChange()" (ionFocus)="showToolbar($event)" (ionBlur)="hideToolbar($event)" />
 
     <div class="core-rte-info-message" *ngIf="infoMessage">
-        <ion-icon name="fas-circle-info" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" aria-hidden="true" />
         {{ infoMessage | translate }}
     </div>
 </div>
@@ -19,7 +18,7 @@
     <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarPrevHidden ? 'true' : null" (click)="toolbarPrev($event)"
         (keyup)="toolbarPrev($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)"
         [attr.aria-label]="'core.previous' | translate" [tabindex]="toolbarPrevHidden ? -1 : 0">
-        <ion-icon name="fas-chevron-left" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-chevron-left" aria-hidden="true" />
     </button>
     <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" (slidechangetransitionend)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
@@ -27,100 +26,100 @@
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate"
                 (click)="buttonAction($event, 'bold', 'strong')" (keyup)="buttonAction($event, 'bold', 'strong')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-bold" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-bold" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]="'core.editor.italic' | translate"
                 (click)="buttonAction($event, 'italic', 'em')" (keyup)="buttonAction($event, 'italic', 'em')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-italic" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-italic" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" [title]="'core.editor.underline' | translate"
                 (click)="buttonAction($event, 'underline', 'u')" (keyup)="buttonAction($event, 'underline', 'u')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-underline" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-underline" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" [title]="'core.editor.strikethrough' | translate"
                 (click)="buttonAction($event, 'strikethrough', 'strike')" (keyup)="buttonAction($event, 'strikethrough', 'strike')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-strikethrough" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-strikethrough" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" [title]="'core.editor.p' | translate"
                 (click)="buttonAction($event, 'p', 'block')" (keyup)="buttonAction($event, 'p', 'block')" (mousedown)="downAction($event)"
                 (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-paragraph" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-paragraph" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" [title]="'core.editor.h3' | translate"
                 (click)="buttonAction($event, 'h3', 'block')" (keyup)="buttonAction($event, 'h3', 'block')" (mousedown)="downAction($event)"
                 (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">3</span>
+                <ion-icon name="fas-heading" aria-hidden="true" /><span aria-hidden="true">3</span>
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" [title]="'core.editor.h4' | translate"
                 (click)="buttonAction($event, 'h4', 'block')" (keyup)="buttonAction($event, 'h4', 'block')" (mousedown)="downAction($event)"
                 (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">4</span>
+                <ion-icon name="fas-heading" aria-hidden="true" /><span aria-hidden="true">4</span>
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" [title]="'core.editor.h5' | translate"
                 (click)="buttonAction($event, 'h5', 'block')" (keyup)="buttonAction($event, 'h5', 'block')" (mousedown)="downAction($event)"
                 (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">5</span>
+                <ion-icon name="fas-heading" aria-hidden="true" /><span aria-hidden="true">5</span>
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" [title]="'core.editor.unorderedlist' | translate"
                 (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)"
                 tabindex="0">
-                <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-list-ul" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" [title]="'core.editor.orderedlist' | translate"
                 (click)="buttonAction($event, 'insertOrderedList')" (keyup)="buttonAction($event, 'insertOrderedList')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-list-ol" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-list-ol" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (keyup)="buttonAction($event, 'removeFormat')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" [title]="'core.editor.clear' | translate">
-                <ion-icon name="fas-eraser" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-eraser" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide *ngIf="canScanQR">
             <button [disabled]="!rteEnabled" (click)="scanQR($event)" (keyup)="scanQR($event)" (mousedown)="stopBubble($event)"
                 (keydown)="stopBubble($event)" [title]="'core.scanqr' | translate">
-                <ion-icon name="fas-qrcode" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-qrcode" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
             <button [attr.aria-pressed]="!rteEnabled" [title]="'core.editor.toggle' | translate" (click)="toggleEditor($event)"
                 (keyup)="toggleEditor($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-code" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-code" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide *ngIf="isPhone">
             <button [title]="'core.editor.hidetoolbar' | translate" (click)="hideToolbar($event, true)" (keyup)="hideToolbar($event, true)"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
-                <ion-icon name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-xmark" aria-hidden="true" />
             </button>
         </swiper-slide>
     </swiper-container>
     <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarNextHidden ? 'true' : null"
         [attr.aria-label]="'core.next' | translate" (click)="toolbarNext($event)" (keyup)="toolbarNext($event)"
         (mousedown)="downAction($event)" (keydown)="downAction($event)" [tabindex]="toolbarNextHidden ? -1 : 0">
-        <ion-icon name="fas-chevron-right" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-chevron-right" aria-hidden="true" />
     </button>
 </div>
diff --git a/src/core/features/emulator/components/capture-media/capture-media.html b/src/core/features/emulator/components/capture-media/capture-media.html
index a33ca161c..a3b55675d 100644
--- a/src/core/features/emulator/components/capture-media/capture-media.html
+++ b/src/core/features/emulator/components/capture-media/capture-media.html
@@ -31,21 +31,20 @@
 
 <ion-footer *ngIf="readyToCapture">
     <ion-row>
-        <ion-col></ion-col>
+        <ion-col />
         <ion-col class="ion-text-center">
             <ion-button fill="clear" *ngIf="!hasCaptured" (click)="actionClicked()" [attr.aria-label]="title">
-                <ion-icon *ngIf="!isCapturing && isVideo" name="fas-video" slot="icon-only" aria-hidden="true"></ion-icon>
-                <ion-icon *ngIf="isImage" name="fas-camera" slot="icon-only" aria-hidden="true"></ion-icon>
-                <ion-icon *ngIf="isCapturing" name="fas-square" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!isCapturing && isVideo" name="fas-video" slot="icon-only" aria-hidden="true" />
+                <ion-icon *ngIf="isImage" name="fas-camera" slot="icon-only" aria-hidden="true" />
+                <ion-icon *ngIf="isCapturing" name="fas-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-button fill="clear" *ngIf="hasCaptured" (click)="discard()" [attr.aria-label]="'core.discard' | translate">
-                <ion-icon color="danger" name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon color="danger" name="fas-trash" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
         <ion-col class="ion-padding ion-text-end chrono-container">
             <core-chrono *ngIf="!isImage" [hidden]="hasCaptured" [running]="isCapturing" [reset]="resetChrono" [endTime]="maxTime"
-                (onEnd)="stopCapturing()">
-            </core-chrono>
+                (onEnd)="stopCapturing()" />
         </ion-col>
     </ion-row>
 </ion-footer>
diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
index 3e95963ea..bda39a252 100644
--- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
+++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
@@ -2,7 +2,7 @@
     <h1>{{ 'core.fileuploader.audiotitle' | translate }}</h1>
 
     <ion-button shape="round" fill="clear" [attr.aria-label]="'core.close' | translate" (click)="cancel()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
+        <ion-icon slot="icon-only" name="close" />
     </ion-button>
 </header>
 
@@ -14,38 +14,37 @@
 
         <ion-button shape="round" color="danger" [attr.aria-label]="'core.fileuploader.startrecording' | translate"
             (click)="startRecording()">
-            <ion-icon slot="icon-only" name="fas-microphone"></ion-icon>
+            <ion-icon slot="icon-only" name="fas-microphone" />
         </ion-button>
     </div>
 
     <div *ngIf="status.startsWith('recording')" class="core-audio-recorder--wrapper">
         <core-audio-histogram *ngIf="(histogramAnalyzer$ | async) as analyser" [analyser]="analyser"
-            [paused]="status !== 'recording-ongoing'">
-        </core-audio-histogram>
+            [paused]="status !== 'recording-ongoing'" />
 
         <div class="core-audio-recorder--controls">
             <div class="core-audio-recorder--control chrono">
                 <div *ngIf="status === 'recording-ongoing'" class="core-audio-recorder--recording-marker"></div>
-                <core-chrono [class.recording]="status === 'recording-ongoing'" [running]="status === 'recording-ongoing'" [hours]="false">
-                </core-chrono>
+                <core-chrono [class.recording]="status === 'recording-ongoing'" [running]="status === 'recording-ongoing'"
+                    [hours]="false" />
             </div>
 
             <div class="core-audio-recorder--control">
                 <ion-button *ngIf="status === 'recording-ongoing'" shape="round" fill="clear"
                     [attr.aria-label]="'core.fileuploader.pauserecording' | translate" (click)="pauseRecording()">
-                    <ion-icon slot="icon-only" name="fas-circle-pause"></ion-icon>
+                    <ion-icon slot="icon-only" name="fas-circle-pause" />
                 </ion-button>
 
                 <ion-button *ngIf="status === 'recording-paused'" [attr.aria-label]="'core.fileuploader.resumerecording' | translate"
                     shape="round" fill="clear" color="danger" (click)="resumeRecording()">
-                    <ion-icon slot="icon-only" name="fas-microphone"></ion-icon>
+                    <ion-icon slot="icon-only" name="fas-microphone" />
                 </ion-button>
             </div>
 
             <div class="core-audio-recorder--control">
                 <ion-button shape="round" fill="clear" [attr.aria-label]="'core.fileuploader.stoprecording' | translate"
                     (click)="stopRecording()">
-                    <ion-icon slot="icon-only" name="fa-check"></ion-icon>
+                    <ion-icon slot="icon-only" name="fa-check" />
                 </ion-button>
             </div>
         </div>
@@ -60,7 +59,7 @@
             <div class="core-audio-recorder--control">
                 <ion-button shape="round" fill="clear" color="danger" [attr.aria-label]="'core.fileuploader.discardrecording' | translate"
                     (click)="discardRecording()">
-                    <ion-icon slot="icon-only" name="fas-trash"></ion-icon>
+                    <ion-icon slot="icon-only" name="fas-trash" />
                 </ion-button>
             </div>
 
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index c45814538..1079d5ff0 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
@@ -10,11 +10,10 @@
 </ion-header>
 <ion-content [core-swipe-navigation]="swipeManager">
     <ion-refresher slot="fixed" [disabled]="!columns || !rows" (ionRefresh)="refreshGrades($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
         <div *ngIf="rows.length" class="core-grades-container">
             <table class="core-grades-table" [class.summary]="showSummary">
                 <thead>
@@ -41,15 +40,12 @@
                                 </td>
                                 <th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
                                     <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start" name="fas-chevron-right"
-                                        class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded">
-                                    </ion-icon>
-                                    <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
-                                    </ion-icon>
+                                        class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded" />
+                                    <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt" />
                                     <img *ngIf="row.image && !row.itemmodule" [src]="row.image" slot="start" class="core-module-icon"
                                         [alt]="row.iconAlt" />
                                     <core-mod-icon *ngIf="row.image && row.itemmodule" [modicon]="row.image" slot="start"
-                                        [modname]="row.itemmodule">
-                                    </core-mod-icon>
+                                        [modname]="row.itemmodule" />
                                     <span [innerHTML]="row.gradeitem"></span>
                                 </th>
                                 <ng-container *ngIf="row.itemtype !== 'category'">
@@ -61,13 +57,11 @@
                                         <td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
                                             class="ion-text-start core-grades-table-feedback" [class.ion-hide-md-down]="column.hiddenPhone">
                                             <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
-                                                [contextInstanceId]="courseId">
-                                            </core-format-text>
+                                                [contextInstanceId]="courseId" />
                                         </td>
                                         <td *ngIf="column.name === 'grade'" [class.ion-hide-md-down]="column.hiddenPhone"
                                             class="ion-text-start core-grades-table-grade {{row.gradeClass}}">
-                                            <ion-icon *ngIf="row.gradeIcon" [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt">
-                                            </ion-icon>
+                                            <ion-icon *ngIf="row.gradeIcon" [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt" />
                                             <span [innerHTML]="row[column.name]"></span>
                                         </td>
                                     </ng-container>
@@ -131,8 +125,7 @@
                                             <p class="item-heading">{{ 'core.grades.feedback' | translate}}</p>
                                             <p>
                                                 <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
-                                                    [contextInstanceId]="courseId">
-                                                </core-format-text>
+                                                    [contextInstanceId]="courseId" />
                                             </p>
                                         </ion-label>
                                     </ion-item>
@@ -149,7 +142,7 @@
                     </ng-container>
                 </tbody>
             </table>
-            <core-infinite-loading [enabled]="rowsOnView < rows.length" (action)="loadMore($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="rowsOnView < rows.length" (action)="loadMore($event)" />
         </div>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/grades/pages/courses/courses.html b/src/core/features/grades/pages/courses/courses.html
index 1c6149ebd..9a0f31c22 100644
--- a/src/core/features/grades/pages/courses/courses.html
+++ b/src/core/features/grades/pages/courses/courses.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.grades.grades' | translate }}</h1>
@@ -11,19 +11,17 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!courses.loaded" (ionRefresh)="refreshCourses($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="courses.loaded">
-            <core-empty-box *ngIf="courses.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
-            </core-empty-box>
+            <core-empty-box *ngIf="courses.empty" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
 
             <ion-list *ngIf="!courses.empty">
                 <ion-item *ngFor="let course of courses.items" [attr.aria-label]="course.courseFullName"
                     [attr.aria-current]="courses.getItemAriaCurrent(course)" class="ion-text-wrap" button [detail]="true"
                     (click)="courses.select(course)">
                     <ion-label>
-                        <core-format-text [text]="course.courseFullName" [contextInstanceId]="course.courseid" contextLevel="course">
-                        </core-format-text>
+                        <core-format-text [text]="course.courseFullName" [contextInstanceId]="course.courseid" contextLevel="course" />
                     </ion-label>
                     <ion-badge slot="end" color="light">
                         <span class="sr-only" *ngIf="course.grade && course.grade !== '-'">
diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index b09ea0ef2..7b7876d87 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,6 +1,5 @@
 <core-loading [hideUntil]="iframeSrc" [fullscreen]="false">
     <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"
-        [showFullscreenOnToolbar]="enableInAppFullscreen" [autoFullscreenOnRotate]="enableInAppFullscreen">
-    </core-iframe>
+        [showFullscreenOnToolbar]="enableInAppFullscreen" [autoFullscreenOnRotate]="enableInAppFullscreen" />
     <script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>
 </core-loading>
diff --git a/src/core/features/h5p/components/h5p-player/core-h5p-player.html b/src/core/features/h5p/components/h5p-player/core-h5p-player.html
index 6b32af633..c6f1eb653 100644
--- a/src/core/features/h5p/components/h5p-player/core-h5p-player.html
+++ b/src/core/features/h5p/components/h5p-player/core-h5p-player.html
@@ -1,15 +1,13 @@
 <div *ngIf="!showPackage && urlParams" class="core-h5p-placeholder">
     <ion-button class="core-h5p-placeholder-play-button" fill="clear" (click)="play($event)"
         [attr.aria-label]="'core.h5p.play' | translate">
-        <ion-icon name="far-circle-play" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="far-circle-play" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
     <div class="core-h5p-placeholder-download-container">
         <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async" [canTrustDownload]="true"
-            (action)="download()">
-        </core-download-refresh>
+            (action)="download()" />
     </div>
 </div>
 
-<core-h5p-iframe *ngIf="showPackage" [fileUrl]="urlParams!.url" [displayOptions]="displayOptions" [onlinePlayerUrl]="src">
-</core-h5p-iframe>
+<core-h5p-iframe *ngIf="showPackage" [fileUrl]="urlParams!.url" [displayOptions]="displayOptions" [onlinePlayerUrl]="src" />
diff --git a/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html b/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html
index a7aaa4000..e5aca5070 100644
--- a/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html
+++ b/src/core/features/login/components/exceeded-attempts/exceeded-attempts.html
@@ -1,6 +1,6 @@
 <ion-card class="core-danger-card">
     <ion-item>
-        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
         <ion-label>
             <p>
                 <ng-content></ng-content>
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
index e553ef901..bc2f9f617 100644
--- a/src/core/features/login/components/login-methods/login-methods.html
+++ b/src/core/features/login/components/login-methods/login-methods.html
@@ -5,14 +5,14 @@
 <div class="core-login-methods" *ngIf="loginMethods.length">
     <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin" *ngFor="let method of loginMethods" (click)="method.action()"
         [attr.aria-label]="method.name" expand="block">
-        <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start"></ion-icon>
+        <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start" />
         <ion-label>{{ method.name }}</ion-label>
     </ion-button>
 </div>
 
 <ng-container *ngIf="showScanQR">
     <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()">
-        <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
+        <ion-icon slot="start" name="fas-qrcode" aria-hidden="true" />
         {{ 'core.scanqr' | translate }}
     </ion-button>
 </ng-container>
diff --git a/src/core/features/login/components/site-help/site-help.html b/src/core/features/login/components/site-help/site-help.html
index 3517b8dc6..5483d3b5a 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -16,8 +16,7 @@
             <ion-item button class="ion-text-wrap divider" (click)="toggle(question)" [attr.aria-expanded]="isOpen(question)"
                 [attr.aria-controls]="'question-' + question.id + '-answer'" role="heading" [detail]="false">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
-                    [class.expandable-status-icon-expanded]="isOpen(question)">
-                </ion-icon>
+                    [class.expandable-status-icon-expanded]="isOpen(question)" />
                 <ion-label>
                     <h2>{{ question.text }}</h2>
                 </ion-label>
@@ -28,8 +27,7 @@
                 <ion-label>
                     <p *ngIf="question.answer.format === 'text'">{{ question.answer.text }}</p>
                     <p *ngIf="question.answer.format === 'safe-html'" [innerHTML]="question.answer.text"></p>
-                    <core-format-text *ngIf="question.answer.format === 'unsafe-html'" [text]="question.answer.text" [filter]="false">
-                    </core-format-text>
+                    <core-format-text *ngIf="question.answer.format === 'unsafe-html'" [text]="question.answer.text" [filter]="false" />
                 </ion-label>
             </ion-item>
         </ng-container>
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.html b/src/core/features/login/components/site-onboarding/site-onboarding.html
index 638c95474..140519174 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -2,10 +2,10 @@
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-button fill="clear" (click)="previous($event)" [attr.aria-label]="'core.back' | translate">
-                <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
-        <ion-title></ion-title>
+        <ion-title />
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
                 {{'core.skip' | translate}}
@@ -47,16 +47,13 @@
         <div *ngIf="step === 2" class="core-login-onboarding-step">
             <ul class="core-login-onboarding-text ion-text-start">
                 <li>
-                    <ion-icon name="far-circle-check" aria-hidden="true">
-                    </ion-icon> {{ 'core.login.onboardingcreatemanagecourses' | translate }}
+                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingcreatemanagecourses' | translate }}
                 </li>
                 <li>
-                    <ion-icon name="far-circle-check" aria-hidden="true">
-                    </ion-icon> {{ 'core.login.onboardingenrolmanagestudents' | translate }}
+                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingenrolmanagestudents' | translate }}
                 </li>
                 <li>
-                    <ion-icon name="far-circle-check" aria-hidden="true">
-                    </ion-icon> {{ 'core.login.onboardingprovidefeedback' | translate }}
+                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingprovidefeedback' | translate }}
                 </li>
             </ul>
 
diff --git a/src/core/features/login/components/sites-modal/sites-modal.html b/src/core/features/login/components/sites-modal/sites-modal.html
index 4c616a9a4..9b78848b6 100644
--- a/src/core/features/login/components/sites-modal/sites-modal.html
+++ b/src/core/features/login/components/sites-modal/sites-modal.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
-                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
 
@@ -13,7 +13,7 @@
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 1" (click)="toggleDelete()"
                 [attr.aria-label]="'core.login.toggleremove' | translate">
-                <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -23,7 +23,7 @@
         <core-sites-list [accountsList]="accountsList" [sitesClickable]="true" [currentSiteClickable]="false"
             (onSiteClicked)="login($event)">
             <ng-template #siteItem let-site="site" let-isCurrentSite="isCurrentSite">
-                <ion-icon *ngIf="isCurrentSite" color="success" name="fas-check"></ion-icon>
+                <ion-icon *ngIf="isCurrentSite" color="success" name="fas-check" />
 
                 <ng-container *ngIf="!isCurrentSite">
                     <ion-badge slot="end" *ngIf="!showDelete && site.badge" @coreShowHideAnimation>
@@ -33,7 +33,7 @@
                     </ion-badge>
                     <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
                         [attr.aria-label]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
-                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ng-container>
             </ng-template>
@@ -41,7 +41,7 @@
     </core-loading>
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
         <ion-fab-button (click)="add($event)" [attr.aria-label]="'core.login.add' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'core.login.add' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/core/features/login/pages/change-password/change-password.html b/src/core/features/login/pages/change-password/change-password.html
index 4dc0c8b1a..44821f7b2 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -11,7 +11,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
-                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index d2cbebcc8..94c9e9c4c 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -10,10 +10,10 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
-                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
             <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
-                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -28,7 +28,7 @@
                     </div>
 
                     <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
-                        <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                        <core-format-text [text]="siteName" [filter]="false" />
                     </h2>
                     <p class="core-siteurl" *ngIf="displaySiteUrl">{{site.siteUrl}}</p>
                 </div>
@@ -45,16 +45,14 @@
                         <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
                         <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
                             formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
-                            required="true">
-                        </ion-input>
+                            required="true" />
                     </ion-item>
                     <ion-item class="ion-margin-bottom">
                         <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
                         <core-show-password name="password">
                             <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
                                 formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
-                                required="true">
-                            </ion-input>
+                                required="true" />
                         </core-show-password>
                     </ion-item>
                     <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
@@ -75,13 +73,13 @@
                     <ion-button expand="block" (click)="openBrowserSSO()"
                         class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
                         {{ 'core.login.loginbutton' | translate }}
-                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                     </ion-button>
                     <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
                 </ng-container>
 
 
-                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="site.siteUrl"></core-login-methods>
+                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="site.siteUrl" />
             </div>
 
             <div class="core-login-sign-up" *ngIf="!isBrowserSSO && (canSignup || authInstructions)">
@@ -89,7 +87,7 @@
 
                 <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
                     <ion-label>
-                        <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
+                        <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false" />
                     </ion-label>
                 </ion-item>
 
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 8030ccd6e..a48fb7453 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -11,7 +11,7 @@
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="authInstructions" (click)="showAuthInstructions()"
                 [attr.aria-label]="'core.login.instructions' | translate">
-                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -46,8 +46,7 @@
                         <ion-label position="stacked">
                             <span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
                         </ion-label>
-                        <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off">
-                        </ion-input>
+                        <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off" />
                     </ion-item>
 
                     <ion-item class="ion-text-wrap">
@@ -85,7 +84,7 @@
                             <p *ngIf="!siteName && displaySiteUrl" class="ion-padding item-heading">{{site.siteUrl}}</p>
                             <!-- If sitename, show big sitename and small siteurl. -->
                             <p *ngIf="siteName" class="ion-padding item-heading">
-                                <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                                <core-format-text [text]="siteName" [filter]="false" />
                             </p>
                             <p *ngIf="siteName && displaySiteUrl">{{site.siteUrl}}</p>
                         </ion-label>
@@ -102,9 +101,8 @@
                             <span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
                         </ion-label>
                         <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                            formControlName="username" autocapitalize="none" autocorrect="off">
-                        </ion-input>
-                        <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
+                            formControlName="username" autocapitalize="none" autocorrect="off" />
+                        <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label position="stacked">
@@ -112,13 +110,12 @@
                         </ion-label>
                         <core-show-password name="password">
                             <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                                formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true">
-                            </ion-input>
+                                formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true" />
                         </core-show-password>
                         <p *ngIf="settings.passwordpolicy" class="core-input-footnote">
                             {{settings.passwordpolicy}}
                         </p>
-                        <core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
+                        <core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors" />
                     </ion-item>
 
                     <!-- More details. -->
@@ -132,34 +129,29 @@
                             <span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
                         </ion-label>
                         <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
-                            autocapitalize="none" autocorrect="off">
-                        </ion-input>
-                        <core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
+                            autocapitalize="none" autocorrect="off" />
+                        <core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label position="stacked">
                             <span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
                         </ion-label>
                         <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
-                            formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
-                        </ion-input>
-                        <core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
+                            formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)" />
+                        <core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors" />
                     </ion-item>
                     <ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
                         <ion-label position="stacked">
                             <span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
                         </ion-label>
                         <ion-input type="text" [name]="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
-                            formControlName="{{nameField}}" autocorrect="off">
-                        </ion-input>
-                        <core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]">
-                        </core-input-errors>
+                            formControlName="{{nameField}}" autocorrect="off" />
+                        <core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
                         <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
-                            autocorrect="off">
-                        </ion-input>
+                            autocorrect="off" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label position="stacked">{{ 'core.user.country' | translate }}</ion-label>
@@ -178,7 +170,7 @@
                             </ion-label>
                         </ion-item-divider>
                         <core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
-                            registerAuth="email" [form]="signupForm"></core-user-profile-field>
+                            registerAuth="email" [form]="signupForm" />
                     </ng-container>
 
                     <!-- ReCAPTCHA -->
@@ -189,7 +181,7 @@
                             </ion-label>
                         </ion-item-divider>
                         <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="site.siteUrl"
-                            [showRequiredError]="formSubmitClicked"></core-recaptcha>
+                            [showRequiredError]="formSubmitClicked" />
                     </ng-container>
 
                     <!-- Site policy (if any). -->
@@ -209,10 +201,9 @@
                         <ion-item class="ion-text-wrap">
                             <ion-label>
                                 <span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
-                                <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors">
-                                </core-input-errors>
+                                <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors" />
                             </ion-label>
-                            <ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed"></ion-checkbox>
+                            <ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed" />
                         </ion-item>
                     </ng-container>
 
@@ -232,7 +223,7 @@
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>
                     <h2 *ngIf="siteName" class="item-heading ion-padding">
-                        <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                        <core-format-text [text]="siteName" [filter]="false" />
                     </h2>
                 </ion-label>
             </ion-item-divider>
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index 12cb62c05..db8ac4b3e 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -31,18 +31,17 @@
                 <ion-radio-group formControlName="field">
                     <ion-item>
                         <ion-label>{{ 'core.login.username' | translate }}</ion-label>
-                        <ion-radio slot="end" value="username"></ion-radio>
+                        <ion-radio slot="end" value="username" />
                     </ion-item>
                     <ion-item>
                         <ion-label>{{ 'core.user.email' | translate }}</ion-label>
-                        <ion-radio slot="end" value="email"></ion-radio>
+                        <ion-radio slot="end" value="email" />
                     </ion-item>
                 </ion-radio-group>
                 <ion-item>
                     <ion-label class="sr-only">{{ 'core.login.usernameoremail' | translate }}</ion-label>
                     <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
-                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
-                    </ion-input>
+                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus" />
                 </ion-item>
                 <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
                     {{ 'core.courses.search' | translate }}
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 4844c440c..3113d5098 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-button fill="clear" (click)="cancel($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
-                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
 
@@ -12,7 +12,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
-                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -22,7 +22,7 @@
         <div class="list-item-limited-width" *ngIf="site">
             <ion-card *ngIf="!isLoggedOut" class="core-warning-card core-login-reconnect-warning">
                 <ion-item>
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>
                         <p>{{ 'core.lostconnection' | translate }}</p>
                     </ion-label>
@@ -36,7 +36,7 @@
                     </div>
 
                     <p *ngIf="siteInfo?.siteName" class="ion-no-margin ion-no-padding core-sitename">
-                        <core-format-text [text]="siteInfo?.siteName" [filter]="false"></core-format-text>
+                        <core-format-text [text]="siteInfo?.siteName" [filter]="false" />
                     </p>
                     <p class="core-siteurl" *ngIf="displaySiteUrl">{{site.siteUrl}}</p>
                 </div>
@@ -44,9 +44,9 @@
                 <div class="core-login-user">
                     <!-- Show user avatar. -->
                     <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [site]="siteInfo" [linkProfile]="false"
-                        [siteId]="siteId"></core-user-avatar>
+                        [siteId]="siteId" />
                     <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
-                        <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
+                        <core-format-text [text]="siteInfo?.fullname" [filter]="false" />
                     </p>
                 </div>
                 <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && reconnectAttempts >= 3"
@@ -62,8 +62,7 @@
                         <core-show-password name="password">
                             <ion-input class="core-ioninput-password" name="password" type="password"
                                 placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
-                                autocomplete="current-password" enterkeyhint="go" required="true">
-                            </ion-input>
+                                autocomplete="current-password" enterkeyhint="go" required="true" />
                         </core-show-password>
                     </ion-item>
                     <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
@@ -82,14 +81,14 @@
                     <ion-button expand="block" (click)="openBrowserSSO()"
                         class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
                         {{ 'core.login.loginbutton' | translate }}
-                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                     </ion-button>
                     <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
                 </ng-container>
 
                 <!-- Additional Login methods -->
                 <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="site.siteUrl"
-                    [redirectData]="redirectData"></core-login-methods>
+                    [redirectData]="redirectData" />
             </div>
         </div>
     </core-loading>
diff --git a/src/core/features/login/pages/site-policy/site-policy.html b/src/core/features/login/pages/site-policy/site-policy.html
index 25f2f27de..76ca02525 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/src/core/features/login/pages/site-policy/site-policy.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -25,7 +25,7 @@
                 </ion-label>
             </ion-item>
             <ion-card *ngIf="showInline" class="core-site-policy-iframe-container">
-                <core-iframe [src]="sitePolicy"></core-iframe>
+                <core-iframe [src]="sitePolicy" />
             </ion-card>
             <ion-button class="ion-text-wrap ion-margin-horizontal" expand="block" (click)="accept()">
                 {{ 'core.login.policyacceptmandatory' | translate }}
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 620918b92..c9e098b7a 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -10,7 +10,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
-                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -28,8 +28,7 @@
                         <h2>{{ 'core.login.siteaddress' | translate }}</h2>
                     </ion-label>
                     <ion-input name="url" type="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}"
-                        formControlName="siteUrl" [core-auto-focus]="showKeyboard && !showScanQR">
-                    </ion-input>
+                        formControlName="siteUrl" [core-auto-focus]="showKeyboard && !showScanQR" />
                 </ion-item>
             </ng-container>
             <ng-container *ngIf="siteSelector !== 'url'">
@@ -38,8 +37,7 @@
                         <h2>{{ 'core.login.siteaddress' | translate }}</h2>
                     </ion-label>
                     <ion-input name="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}" formControlName="siteUrl"
-                        [core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)">
-                    </ion-input>
+                        [core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)" />
                 </ion-item>
 
                 <ion-list [class.hidden]="!hasSites && !enteredSiteUrl" class="core-login-site-list">
@@ -51,7 +49,7 @@
                     <ion-item button *ngIf="enteredSiteUrl" (click)="connect(enteredSiteUrl.url, $event)"
                         [attr.aria-label]="'core.login.connect' | translate" [detail]="true" class="core-login-entered-site">
                         <ion-thumbnail slot="start" aria-hidden="true">
-                            <ion-icon name="fas-pen" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-pen" aria-hidden="true" />
                         </ion-thumbnail>
                         <ion-label>
                             <h2 class="ion-text-wrap">{{ 'core.login.yourenteredsite' | translate }}</h2>
@@ -61,16 +59,16 @@
 
                     <div class="core-login-site-list-found" [class.hidden]="!hasSites" [class.dimmed]="loadingSites">
                         <div *ngIf="loadingSites" class="core-login-site-list-loading">
-                            <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                            <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                         </div>
                         <ng-container *ngFor="let site of sites">
-                            <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}"></ng-container>
+                            <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}" />
                         </ng-container>
                     </div>
                 </ion-list>
 
                 <div *ngIf="!hasSites && loadingSites" class="core-login-site-nolist-loading">
-                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                 </div>
             </ng-container>
 
@@ -92,10 +90,9 @@
                     </ion-label>
                 </ion-item>
                 <ion-searchbar *ngIf="fixedSites.length > 4" [(ngModel)]="filter" (ionInput)="filterChanged($event)"
-                    (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate">
-                </ion-searchbar>
+                    (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate" />
                 <ng-container *ngFor="let site of filteredSites">
-                    <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}"></ng-container>
+                    <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}" />
                 </ng-container>
             </ion-list>
         </ng-container>
@@ -105,7 +102,7 @@
             </div>
             <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()"
                 aria-haspopup="dialog">
-                <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
+                <ion-icon slot="start" name="fas-qrcode" aria-hidden="true" />
                 {{ 'core.scanqr' | translate }}
             </ion-button>
         </ng-container>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index a6cbe0f01..38c21d054 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -11,10 +11,10 @@
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 0" (click)="toggleDelete()"
                 [attr.aria-label]="'core.login.toggleremove' | translate">
-                <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
             </ion-button>
             <ion-button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
-                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -30,14 +30,14 @@
                 </ion-badge>
                 <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
                     [attr.aria-label]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
-                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ng-template>
         </core-sites-list>
     </core-loading>
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
         <ion-fab-button (click)="add()" [attr.aria-label]="'core.login.add' | translate">
-            <ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-plus" aria-hidden="true" />
             <span class="sr-only">{{ 'core.login.add' | translate }}</span>
         </ion-fab-button>
     </ion-fab>
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.html b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.html
index b23e54da8..766db041e 100644
--- a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.html
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.html
@@ -1,4 +1,3 @@
 <core-user-avatar *ngIf="(alwaysShow || isMainScreen) && siteInfo" [site]="siteInfo" class="core-bar-button-image clickable"
     [linkProfile]="false" (ariaButtonClick)="openUserMenu($event)" [userTour]="userTour"
-    [attr.aria-label]="'core.user.useraccount' | translate">
-</core-user-avatar>
+    [attr.aria-label]="'core.user.useraccount' | translate" />
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 896d075c2..04bacc312 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -7,7 +7,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -23,8 +23,7 @@
                     <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
                         onError="this.class='image-not-found'">
                     <p class="core-usermenu-sitename">
-                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
-                        </core-format-text>
+                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true" />
                     </p>
                     <a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
                 </ion-label>
@@ -36,15 +35,14 @@
                     <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
                         onError="this.class='image-not-found'">
                     <p class="core-usermenu-sitename">
-                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
-                        </core-format-text>
+                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true" />
                     </p>
                 </ion-label>
             </ion-item>
 
             <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
                 [detail]="true" [attr.aria-label]="'core.user.profile' | translate">
-                <core-user-avatar [site]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
+                <core-user-avatar [site]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start" />
                 <ion-label>
                     <p class="item-heading">{{ siteInfo.fullname }}</p>
                 </ion-label>
@@ -52,14 +50,14 @@
 
             <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
                 <ion-label>
-                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                 </ion-label>
             </ion-item>
 
             <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
                 [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
                 [attr.aria-label]="handler.title | translate" [detail]="true">
-                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ handler.title | translate }}</p>
                 </ion-label>
@@ -69,13 +67,12 @@
                 <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
                     {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
                 </span>
-                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
-                </ion-spinner>
+                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate" />
             </ion-item>
 
             <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" [detail]="true"
                 class="core-user-menu-preferences">
-                <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-wrench" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
                 </ion-label>
@@ -84,7 +81,7 @@
             <ion-item *ngIf="displayContactSupport" button (click)="contactSupport($event)"
                 [attr.aria-label]="'core.user.support' | translate" [detail]="true" detailIcon="open-outline"
                 class="core-user-menu-support">
-                <ion-icon name="fas-envelope" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-envelope" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ 'core.user.support' | translate }}</p>
                 </ion-label>
@@ -94,7 +91,7 @@
 </ion-content>
 <ion-footer>
     <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" [detail]="true" class="ion-text-wrap">
-        <ion-icon name="fas-right-left" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-right-left" slot="start" aria-hidden="true" />
         <ion-label>
             <p class="item-heading">{{ 'core.mainmenu.switchaccount' | translate }}</p>
         </ion-label>
@@ -103,11 +100,11 @@
         <ion-button (click)="logout($event)" expand="block" color="danger" [attr.aria-label]="'core.mainmenu.logout' | translate"
             class="ion-text-wrap">
             <ng-container *ngIf="!removeAccountOnLogout">
-                <ion-icon name="fas-right-from-bracket" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-right-from-bracket" slot="start" aria-hidden="true" />
                 {{ 'core.mainmenu.logout' | translate }}
             </ng-container>
             <ng-container *ngIf="removeAccountOnLogout">
-                <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-trash" slot="start" aria-hidden="true" />
                 {{ 'core.login.removeaccount' | translate }}
             </ng-container>
         </ion-button>
diff --git a/src/core/features/mainmenu/pages/home/home.html b/src/core/features/mainmenu/pages/home/home.html
index 52f0b8e90..f1769431a 100644
--- a/src/core/features/mainmenu/pages/home/home.html
+++ b/src/core/features/mainmenu/pages/home/home.html
@@ -1,22 +1,20 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename">
-                </core-format-text>
+                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename" />
                 <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <core-loading [hideUntil]="loaded">
-    <core-empty-box *ngIf="tabs.length === 0" icon="fas-house" [message]="'core.courses.nocourses' | translate"></core-empty-box>
+    <core-empty-box *ngIf="tabs.length === 0" icon="fas-house" [message]="'core.courses.nocourses' | translate" />
 </core-loading>
-<core-tabs-outlet *ngIf="tabs.length > 0" [hideUntil]="loaded" [tabs]="tabs" (ionChange)="tabSelected()">
-</core-tabs-outlet>
+<core-tabs-outlet *ngIf="tabs.length > 0" [hideUntil]="loaded" [tabs]="tabs" (ionChange)="tabSelected()" />
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index 1c3db50b8..fd46cbcf2 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@@ -1,14 +1,14 @@
 <ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement"
     [class.tabshidden]="!isMainScreen && tabsPlacement === 'bottom'" (ionTabsDidChange)="tabChanged($event)">
     <ion-tab-bar slot="bottom" class="mainmenu-tabs" [@menuVisibilityAnimation]="visibility">
-        <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+        <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate" />
 
-        <core-user-menu-button *ngIf="loaded && tabsPlacement === 'side'" [alwaysShow]="true"></core-user-menu-button>
+        <core-user-menu-button *ngIf="loaded && tabsPlacement === 'side'" [alwaysShow]="true" />
 
         <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown(tab.page, $event)" (keyup)="tabAction.keyUp(tab.page, $event)"
             [hidden]="!loaded && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
             [selected]="tab.page === selectedTab" [tabindex]="selectedTab === tab.page ? 0 : -1" [attr.aria-controls]="tab.id">
-            <ion-icon class="core-tab-icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
+            <ion-icon class="core-tab-icon" [name]="tab.icon" aria-hidden="true" />
             <ion-label aria-hidden="true">{{ tab.title | translate }}</ion-label>
             <ion-badge class="core-tab-badge" *ngIf="tab.badge" aria-hidden="true">{{ tab.badge }}</ion-badge>
             <span class="sr-only">{{ tab.title | translate }}</span>
@@ -20,10 +20,10 @@
         <ion-tab-button (keydown)="tabAction.keyDown(morePageName, $event)" (keyup)="tabAction.keyUp(morePageName, $event)"
             [hidden]="!loaded" [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab === morePageName ? 0 : -1"
             [attr.aria-controls]="morePageName">
-            <ion-icon class="core-tab-icon" name="ellipsis-horizontal" aria-hidden="true"></ion-icon>
+            <ion-icon class="core-tab-icon" name="ellipsis-horizontal" aria-hidden="true" />
             <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>
             <span class="sr-only">{{ 'core.more' | translate }}</span>
-            <ion-icon *ngIf="moreBadge" class="core-tab-badge" name="fas-circle" aria-hidden="true"></ion-icon>
+            <ion-icon *ngIf="moreBadge" class="core-tab-badge" name="fas-circle" aria-hidden="true" />
         </ion-tab-button>
     </ion-tab-bar>
 </ion-tabs>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index a9582312b..f8ef172c2 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -9,7 +9,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
@@ -17,12 +17,12 @@
     <ion-list>
         <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
             <ion-label>
-                <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                <ion-spinner [attr.aria-label]="'core.loading' | translate" />
             </ion-label>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
             (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" [detail]="true">
-            <ion-icon [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon [name]="handler.icon" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ handler.title | translate}}</p>
             </ion-label>
@@ -32,28 +32,27 @@
             <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
                 {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
             </span>
-            <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
-            </ion-spinner>
+            <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate" />
         </ion-item>
         <ng-container *ngFor="let item of customItems">
             <ion-item button *ngIf="item.type !== 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
                 [capture]="item.type === 'app'" [inApp]="item.type === 'inappbrowser'" class="core-moremenu-customitem" [detail]="true"
                 [detailIcon]="item.type === 'browser' ? 'open-outline' : 'chevron-forward'">
-                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{item.label}}</p>
                 </ion-label>
             </ion-item>
             <ion-item button *ngIf="item.type === 'embedded'" (click)="openItem(item)" [attr.aria-label]="item.label"
                 class="core-moremenu-customitem" [detail]="true">
-                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{item.label}}</p>
                 </ion-label>
             </ion-item>
         </ng-container>
         <ion-item button *ngIf="showScanQR" (click)="scanQR()" [detail]="true">
-            <ion-icon name="fas-qrcode" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-qrcode" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.scanqr' | translate }}</p>
             </ion-label>
@@ -62,7 +61,7 @@
 </ion-content>
 <ion-footer>
     <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" [detail]="true">
-        <ion-icon name="fas-gears" slot="start" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-gears" slot="start" aria-hidden="true" />
         <ion-label>
             <p class="item-heading">{{ 'core.settings.appsettings' | translate }}</p>
         </ion-label>
diff --git a/src/core/features/mainmenu/pages/reload/reload.html b/src/core/features/mainmenu/pages/reload/reload.html
index 5e5ea6d14..1e61e89a5 100644
--- a/src/core/features/mainmenu/pages/reload/reload.html
+++ b/src/core/features/mainmenu/pages/reload/reload.html
@@ -1,3 +1,3 @@
 <ion-content>
-    <core-loading></core-loading>
+    <core-loading />
 </ion-content>
diff --git a/src/core/features/question/components/question/core-question.html b/src/core/features/question/components/question/core-question.html
index 2356fd868..57ece7558 100644
--- a/src/core/features/question/components/question/core-question.html
+++ b/src/core/features/question/components/question/core-question.html
@@ -8,8 +8,7 @@
 <input *ngIf="seqCheck" type="hidden" name="{{seqCheck.name}}" value="{{seqCheck.value}}">
 
 <!-- Question behaviour components. -->
-<core-dynamic-component *ngFor="let componentClass of behaviourComponents" [component]="componentClass" [data]="data">
-</core-dynamic-component>
+<core-dynamic-component *ngFor="let componentClass of behaviourComponents" [component]="componentClass" [data]="data" />
 
 <!-- Question validation error. -->
 <ion-item class="ion-text-wrap core-danger-item" *ngIf="validationError">
@@ -22,16 +21,14 @@
 <ion-button *ngFor="let button of question?.behaviourButtons" class="ion-margin-vertical ion-text-wrap" expand="block"
     (click)="buttonClicked.emit(button)" [disabled]="button.disabled">
     <core-format-text [component]="component" [componentId]="componentId" [text]="button.value" [contextLevel]="contextLevel"
-        [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-    </core-format-text>
+        [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
 </ion-button>
 
 <!-- Question feedback. -->
 <ion-item class="ion-text-wrap core-question-feedback-container" *ngIf="question && question.feedbackHtml">
     <ion-label>
         <core-format-text [component]="component" [componentId]="componentId" [text]="question.feedbackHtml" [contextLevel]="contextLevel"
-            [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-        </core-format-text>
+            [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
     </ion-label>
 </ion-item>
 
@@ -39,7 +36,6 @@
 <ion-item class="ion-text-wrap core-question-comment" *ngIf="question && question.commentHtml">
     <ion-label>
         <core-format-text [component]="component" [componentId]="componentId" [text]="question.commentHtml" [contextLevel]="contextLevel"
-            [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-        </core-format-text>
+            [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
     </ion-label>
 </ion-item>
diff --git a/src/core/features/rating/components/ratings/ratings-modal.html b/src/core/features/rating/components/ratings/ratings-modal.html
index 6bc30a994..e6446d520 100644
--- a/src/core/features/rating/components/ratings/ratings-modal.html
+++ b/src/core/features/rating/components/ratings/ratings-modal.html
@@ -5,7 +5,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -14,7 +14,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="ratings.length > 0">
             <ion-item class="ion-text-wrap" *ngFor="let rating of ratings">
-                <core-user-avatar [user]="rating" [courseId]="courseId" slot="start"></core-user-avatar>
+                <core-user-avatar [user]="rating" [courseId]="courseId" slot="start" />
                 <ion-label>
                     <p class="item-heading">{{ rating.userfullname }}</p>
                     <p>{{ rating.rating }}</p>
@@ -24,7 +24,6 @@
                 </ion-note>
             </ion-item>
         </ion-list>
-        <core-empty-box *ngIf="ratings.length === 0" icon="fas-star-half-stroke" [message]="'core.rating.noratings' | translate">
-        </core-empty-box>
+        <core-empty-box *ngIf="ratings.length === 0" icon="fas-star-half-stroke" [message]="'core.rating.noratings' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/reminders/components/date/date.html b/src/core/features/reminders/components/date/date.html
index 4f75b5422..69d18876a 100644
--- a/src/core/features/reminders/components/date/date.html
+++ b/src/core/features/reminders/components/date/date.html
@@ -1,8 +1,7 @@
 <div>
-    <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-calendar" aria-hidden="true" />
     <strong>{{ label }}</strong> {{ readableTime }}
 </div>
 
 <core-reminders-set-button *ngIf="showReminderButton" slot="end" [component]="component" [instanceId]="instanceId" [type]="type"
-    [label]="label" [timebefore]="timebefore" [time]="time" [title]="title" [url]="url">
-</core-reminders-set-button>
+    [label]="label" [timebefore]="timebefore" [time]="time" [title]="title" [url]="url" />
diff --git a/src/core/features/reminders/components/set-button/set-button.html b/src/core/features/reminders/components/set-button/set-button.html
index 97b9f1b9f..0d9b2a488 100644
--- a/src/core/features/reminders/components/set-button/set-button.html
+++ b/src/core/features/reminders/components/set-button/set-button.html
@@ -1,6 +1,6 @@
 <ion-button fill="clear" size="small" (click)="setReminder($event)"
     [attr.aria-label]="'core.reminders.setareminderfor' | translate : { title: title, label: labelClean }"
     [attr.aria-checked]="timebefore !== undefined">
-    <ion-icon name="fas-bell" slot="icon-only" *ngIf="timebefore !== undefined" aria-hidden="true"></ion-icon>
-    <ion-icon name="far-bell-slash" slot="icon-only" *ngIf="timebefore === undefined" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-bell" slot="icon-only" *ngIf="timebefore !== undefined" aria-hidden="true" />
+    <ion-icon name="far-bell-slash" slot="icon-only" *ngIf="timebefore === undefined" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
index a4f4216d0..abd3e5ff3 100644
--- a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
+++ b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
@@ -10,8 +10,7 @@
         <div class="flex-row">
             <!-- Input to enter the value. -->
             <ion-input id="reminderValue" type="number" name="customvalue" [(ngModel)]="customValue" placeholder="10"
-                [attr.aria-label]="'core.reminders.value' | translate">
-            </ion-input>
+                [attr.aria-label]="'core.reminders.value' | translate" />
 
             <!-- Units. -->
             <span class="accesshide" id="reminderUnits_label">{{ 'core.reminders.units' | translate }}</span>
diff --git a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
index 425bc39d1..b50f8eba2 100644
--- a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
+++ b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
@@ -14,17 +14,18 @@
                 <ion-label>
                     <p class="item-heading">{{ option.label }}</p>
                 </ion-label>
-                <ion-icon name="fas-check" *ngIf="currentValue === option.radioValue" slot="end" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-check" *ngIf="currentValue === option.radioValue" slot="end" aria-hidden="true" />
             </ion-item>
         </ng-container>
 
         <!-- Custom value. -->
-        <ion-item button class="ion-text-wrap" (click)="setCustom($event)" [detail]="false" [attr.aria-selected]="currentValue === 'custom'">
+        <ion-item button class="ion-text-wrap" (click)="setCustom($event)" [detail]="false"
+            [attr.aria-selected]="currentValue === 'custom'">
             <ion-label>
                 <p class="item-heading">{{ 'core.reminders.custom' | translate }}</p>
                 <p>{{ customLabel }}</p>
             </ion-label>
-            <ion-icon name="fas-check" *ngIf="currentValue === 'custom'" slot="end" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-check" *ngIf="currentValue === 'custom'" slot="end" aria-hidden="true" />
         </ion-item>
 
         <ion-item *ngIf="noReminderLabel" button class="ion-text-wrap text-danger border-top" (click)="disableReminder()" [detail]="false"
@@ -32,7 +33,7 @@
             <ion-label>
                 <p class="item-heading">{{ noReminderLabel | translate }}</p>
             </ion-label>
-            <ion-icon name="fas-check" *ngIf="currentValue === 'disabled'" slot="end" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-check" *ngIf="currentValue === 'disabled'" slot="end" aria-hidden="true" />
         </ion-item>
 
     </ion-content>
diff --git a/src/core/features/reportbuilder/components/report-column/report-column.html b/src/core/features/reportbuilder/components/report-column/report-column.html
index 2825771f6..195755f20 100644
--- a/src/core/features/reportbuilder/components/report-column/report-column.html
+++ b/src/core/features/reportbuilder/components/report-column/report-column.html
@@ -5,19 +5,16 @@
         <p class="item-heading" *ngIf="columnIndex !== 0 || (columnIndex === 0 && showFirstTitle)"> {{ header }} </p>
         <h2 *ngIf="columnIndex === 0">
             <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source"
-                [contextInstanceId]="contextId">
-            </core-format-text>
+                [contextInstanceId]="contextId" />
             <ng-template #notText>{{ column }}</ng-template>
         </h2>
 
         <ng-container *ngIf="columnIndex !== 0">
             <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source"
-                [contextInstanceId]="contextId">
-            </core-format-text>
+                [contextInstanceId]="contextId" />
             <ng-template #notText>{{ column }}</ng-template>
         </ng-container>
     </ion-label>
     <ion-icon [class.expandable-status-icon-expanded]="!isExpanded" slot="end" aria-hidden="true" name="fas-chevron-up"
-        class="expandable-status-icon" *ngIf="isExpandable" flip-rtl>
-    </ion-icon>
+        class="expandable-status-icon" *ngIf="isExpandable" flip-rtl />
 </ion-item>
diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.html b/src/core/features/reportbuilder/components/report-detail/report-detail.html
index 8b22cc115..8617e2db7 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.html
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.html
@@ -3,7 +3,7 @@
     <core-loading [hideUntil]="state.loaded">
 
         <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReport($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
         <ng-container *ngIf="state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details; else empty">
@@ -16,8 +16,7 @@
                             [rowIndex]="rowIndex" [isExpandable]="columnIndex === 0 && row.columns.length > state.cardVisibleColumns"
                             [isExpanded]="row.isExpanded" [showFirstTitle]="state.cardviewShowFirstTitle" [source]="source$ | async"
                             [contextId]="state.report.details.contextid" [header]="state.report.data.headers[columnIndex]" [column]="column"
-                            (onToggleRow)="toggleRow(rowIndex)">
-                        </core-report-builder-report-column>
+                            (onToggleRow)="toggleRow(rowIndex)" />
                     </ion-list>
                 </ion-card>
             </ng-container>
@@ -35,8 +34,7 @@
                         <tr *ngFor="let row of state.report.data.rows">
                             <td *ngFor="let column of row.columns">
                                 <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"
-                                    [contextInstanceId]="state.report.details.contextid">
-                                </core-format-text>
+                                    [contextInstanceId]="state.report.details.contextid" />
                                 <ng-template #notText> {{ column }} </ng-template>
                             </td>
                         </tr>
@@ -53,8 +51,7 @@
         </ng-template>
 
         <core-infinite-loading *ngIf="!isBlock && state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details"
-            [enabled]="state.canLoadMoreRows" (action)="fetchMoreInfo($event)" [error]="state.errorLoadingRows">
-        </core-infinite-loading>
+            [enabled]="state.canLoadMoreRows" (action)="fetchMoreInfo($event)" [error]="state.errorLoadingRows" />
 
     </core-loading>
 
diff --git a/src/core/features/reportbuilder/components/report-summary/report-summary.html b/src/core/features/reportbuilder/components/report-summary/report-summary.html
index ccb3bb25c..898f440f7 100644
--- a/src/core/features/reportbuilder/components/report-summary/report-summary.html
+++ b/src/core/features/reportbuilder/components/report-summary/report-summary.html
@@ -1,13 +1,12 @@
 <ion-header class="no-title">
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
-        <ion-title>
-        </ion-title>
+        <ion-title />
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -18,8 +17,7 @@
         <ion-item class="ion-text-wrap course-name">
             <ion-label>
                 <h1>
-                    <core-format-text [text]="reportDetail.name" contextLevel="report" [contextInstanceId]="reportDetail.id">
-                    </core-format-text>
+                    <core-format-text [text]="reportDetail.name" contextLevel="report" [contextInstanceId]="reportDetail.id" />
                 </h1>
             </ion-label>
         </ion-item>
@@ -27,8 +25,7 @@
         <ion-item class="ion-text-wrap" [detail]="false" *ngFor="let item of reportDetailToDisplay">
             <ion-label>
                 <p>{{ item.title | translate }}</p>
-                <core-format-text [text]="item.text" contextLevel="report" [contextInstanceId]="reportDetail.id">
-                </core-format-text>
+                <core-format-text [text]="item.text" contextLevel="report" [contextInstanceId]="reportDetail.id" />
             </ion-label>
         </ion-item>
     </div>
@@ -38,10 +35,9 @@
     <ion-item class="ion-text-wrap filters-info">
         <ion-label>
             <p>
-                <ion-icon name="fas-circle-info" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle-info" aria-hidden="true" />
                 <core-format-text [text]="'core.reportbuilder.filtersapplied' | translate: { $a: reportUrl }" [filter]="false"
-                    [captureLinks]="false">
-                </core-format-text>
+                    [captureLinks]="false" />
             </p>
         </ion-label>
     </ion-item>
diff --git a/src/core/features/reportbuilder/pages/list/list.html b/src/core/features/reportbuilder/pages/list/list.html
index c8bfdbf50..69c29b834 100644
--- a/src/core/features/reportbuilder/pages/list/list.html
+++ b/src/core/features/reportbuilder/pages/list/list.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.reportbuilder.reports' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content *ngIf="state$ | async as state">
     <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReports($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="state.loaded">
         <ion-list *ngIf="reports.items?.length; else empty">
@@ -18,7 +18,7 @@
                 *ngFor="let report of reports.items" (click)="reports.select(report)">
                 <ion-label>
                     <p class="item-heading">
-                        <core-format-text [clean]="true" [text]="report.name" [filter]="false"></core-format-text>
+                        <core-format-text [clean]="true" [text]="report.name" [filter]="false" />
                     </p>
                     <p>{{ report.sourcename }}</p>
                 </ion-label>
@@ -27,12 +27,10 @@
 
         <ng-template #empty>
             <core-empty-box *ngIf="!reports.items?.length" icon="fas-rectangle-list"
-                [message]="'core.course.nocontentavailable' | translate">
-            </core-empty-box>
+                [message]="'core.course.nocontentavailable' | translate" />
         </ng-template>
 
         <core-infinite-loading *ngIf="reports.items?.length" [enabled]="reports.loaded && !reports.completed"
-            (action)="fetchMoreReports($event)" [error]="state.loadMoreError">
-        </core-infinite-loading>
+            (action)="fetchMoreReports($event)" [error]="state.loadMoreError" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/reportbuilder/pages/report/report.html b/src/core/features/reportbuilder/pages/report/report.html
index 5f2e4850a..5862a3e7a 100644
--- a/src/core/features/reportbuilder/pages/report/report.html
+++ b/src/core/features/reportbuilder/pages/report/report.html
@@ -1,16 +1,16 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="openInfo()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-circle-info" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-circle-info" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
         <ion-title *ngIf="reportDetail">
             <h1>
-                <core-format-text [clean]="true" [text]="reportDetail.name" [filter]="false"></core-format-text>
+                <core-format-text [clean]="true" [text]="reportDetail.name" [filter]="false" />
             </h1>
             <p class="subheading"> {{ reportDetail.sourcename }} </p>
         </ion-title>
@@ -18,6 +18,5 @@
 </ion-header>
 
 <ion-content>
-    <core-report-builder-report-detail [isBlock]="false" [reportId]="reportId" (onReportLoaded)="loadReportDetail($event)">
-    </core-report-builder-report-detail>
+    <core-report-builder-report-detail [isBlock]="false" [reportId]="reportId" (onReportLoaded)="loadReportDetail($event)" />
 </ion-content>
diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html
index bc36575d6..66a23d8b4 100644
--- a/src/core/features/search/components/global-search-filters/global-search-filters.html
+++ b/src/core/features/search/components/global-search-filters/global-search-filters.html
@@ -5,18 +5,18 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
     <ion-refresher slot="fixed" (ionRefresh)="refreshFilters($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <ion-list>
         <ng-container *ngIf="searchAreaCategories.length > 0">
-            <core-spacer></core-spacer>
+            <core-spacer />
             <ion-item class="ion-text-wrap help">
                 <ion-label>
                     {{ 'core.search.filtercategories' | translate }}
@@ -25,18 +25,18 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>{{ 'core.search.allcategories' | translate }}</ion-label>
                 <ion-checkbox slot="end" [(ngModel)]="allSearchAreaCategories" [indeterminate]="allSearchAreaCategories === null"
-                    (ionChange)="allSearchAreaCategoriesUpdated()"></ion-checkbox>
+                    (ionChange)="allSearchAreaCategoriesUpdated()" />
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let searchAreaCategory of searchAreaCategories">
                 <ion-label>
-                    <core-format-text [text]="searchAreaCategory.name"></core-format-text>
+                    <core-format-text [text]="searchAreaCategory.name" />
                 </ion-label>
                 <ion-checkbox slot="end" [(ngModel)]="searchAreaCategory.checked"
-                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)"></ion-checkbox>
+                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)" />
             </ion-item>
         </ng-container>
         <ng-container *ngIf="!hideCourses && courses.length > 0">
-            <core-spacer></core-spacer>
+            <core-spacer />
             <ion-item class="ion-text-wrap help">
                 <ion-label>
                     {{ 'core.search.filtercourses' | translate }}
@@ -44,14 +44,13 @@
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>{{ 'core.search.allcourses' | translate }}</ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="allCourses" [indeterminate]="allCourses === null" (ionChange)="allCoursesUpdated()">
-                </ion-checkbox>
+                <ion-checkbox slot="end" [(ngModel)]="allCourses" [indeterminate]="allCourses === null" (ionChange)="allCoursesUpdated()" />
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let course of courses">
                 <ion-label>
-                    <core-format-text [text]="course.shortname"></core-format-text>
+                    <core-format-text [text]="course.shortname" />
                 </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="course.checked" (ionChange)="onCourseInputChanged(course)"></ion-checkbox>
+                <ion-checkbox slot="end" [(ngModel)]="course.checked" (ionChange)="onCourseInputChanged(course)" />
             </ion-item>
         </ng-container>
     </ion-list>
diff --git a/src/core/features/search/components/global-search-result/global-search-result.html b/src/core/features/search/components/global-search-result/global-search-result.html
index dfb49fe48..88238eec1 100644
--- a/src/core/features/search/components/global-search-result/global-search-result.html
+++ b/src/core/features/search/components/global-search-result/global-search-result.html
@@ -1,23 +1,23 @@
 <ion-item lines="inset" button (click)="onClick.emit($event)">
-    <core-course-image *ngIf="result.course" [course]="result.course"></core-course-image>
-    <core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false"></core-user-avatar>
+    <core-course-image *ngIf="result.course" [course]="result.course" />
+    <core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false" />
     <ion-label>
         <h3 *ngIf="result.title">
-            <ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true"></ion-icon>
+            <ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true" />
             <core-mod-icon *ngIf="!renderedIcon && result.module" [modicon]="result.module.iconurl"
-                [modname]="result.module.name"></core-mod-icon>
+                [modname]="result.module.name" />
             <img *ngIf="!renderedIcon && !result.module && result.component" [src]="result.component.iconurl" alt="" class="result-icon"
                 core-external-content [component]="result.component.name">
-            <core-format-text [text]="result.title"></core-format-text>
+            <core-format-text [text]="result.title" />
         </h3>
-        <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content"></core-format-text>
+        <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content" />
         <div *ngIf="renderedContext" class="result-context-wrapper">
             <div *ngIf="renderedContext.courseName" class="result-context">
-                <ion-icon name="fas-graduation-cap" aria-hidden="true"></ion-icon>
-                <core-format-text [text]="renderedContext.courseName"></core-format-text>
+                <ion-icon name="fas-graduation-cap" aria-hidden="true" />
+                <core-format-text [text]="renderedContext.courseName" />
             </div>
             <div *ngIf="renderedContext.userName" class="result-context">
-                <ion-icon name="fas-user" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-user" aria-hidden="true" />
                 <span>{{ 'core.search.resultby' | translate: { $a: renderedContext.userName } }}</span>
             </div>
         </div>
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index 6f0cc0bba..522d9818c 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/src/core/features/search/components/search-box/core-search-box.html
@@ -2,22 +2,20 @@
     <ion-item class="search-box">
         <ion-label class="sr-only">{{ placeholder }}</ion-label>
         <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
-            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
-        </ion-input>
+            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)" />
         <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
             [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
-            <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
         </ion-button>
         <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
             [disabled]="searched === '' || disabled" (click)="clearForm()">
-            <ion-icon name="fas-delete-left" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
+            <ion-icon name="fas-delete-left" slot="icon-only" aria-hidden="true" flip-rtl />
         </ion-button>
     </ion-item>
     <ion-list class="core-search-history" [hidden]="!historyShown">
         <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
             [detail]="true">
-            <ion-icon name="fas-clock-rotate-left" slot="start" aria-hidden="true">
-            </ion-icon>
+            <ion-icon name="fas-clock-rotate-left" slot="start" aria-hidden="true" />
             <ion-label>{{item.searchedtext}}</ion-label>
         </ion-item>
     </ion-list>
diff --git a/src/core/features/search/pages/global-search/global-search.html b/src/core/features/search/pages/global-search/global-search.html
index 07965f954..61f677773 100644
--- a/src/core/features/search/pages/global-search/global-search.html
+++ b/src/core/features/search/pages/global-search/global-search.html
@@ -1,14 +1,14 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="courseId">{{ 'core.search' | translate }}</h1>
             <h1 *ngIf="!courseId">{{ 'core.search.globalsearch' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
@@ -16,25 +16,23 @@
     <div>
         <ion-card class="core-danger-card" *ngIf="searchBanner">
             <ion-item>
-                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
-                    <core-format-text [text]="searchBanner"></core-format-text>
+                    <core-format-text [text]="searchBanner" />
                 </ion-label>
             </ion-item>
         </ion-card>
 
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'core.search' | translate"
-            [searchLabel]="'core.search' | translate" [autoFocus]="true" searchArea="CoreSearchGlobalSearch"></core-search-box>
+            [searchLabel]="'core.search' | translate" [autoFocus]="true" searchArea="CoreSearchGlobalSearch" />
 
         <ion-list *ngIf="resultsSource.isLoaded()">
             <core-search-global-search-result *ngFor="let result of resultsSource.getItems()" [result]="result"
-                (onClick)="visitResult(result)">
-            </core-search-global-search-result>
+                (onClick)="visitResult(result)" />
         </ion-list>
 
         <core-infinite-loading [enabled]="resultsSource.isLoaded() && !resultsSource.isCompleted()" (action)="loadMoreResults($event)"
-            [error]="loadMoreError">
-        </core-infinite-loading>
+            [error]="loadMoreError" />
 
         <core-empty-box *ngIf="resultsSource.isEmpty()" icon="fas-magnifying-glass" [dimmed]="!resultsSource.isLoaded()">
             <p *ngIf="!resultsSource.isLoaded()">{{ 'core.search.empty' | translate }}</p>
@@ -46,7 +44,7 @@
 
         <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
             <ion-fab-button (click)="openFilters()" [attr.aria-label]="'core.filter' | translate">
-                <ion-icon name="fas-filter" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-filter" aria-hidden="true" />
             </ion-fab-button>
         </ion-fab>
     </div>
diff --git a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.html b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.html
index 7625c8827..eeb81da2c 100644
--- a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.html
+++ b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.html
@@ -8,10 +8,10 @@
     </ion-header>
     <ion-content class="limited-width">
         <div>
-            <core-search-box></core-search-box>
+            <core-search-box />
             <ion-list>
-                <core-search-global-search-result *ngFor="let result of results" [result]="result" (onClick)="resultClicked(result.title)">
-                </core-search-global-search-result>
+                <core-search-global-search-result *ngFor="let result of results" [result]="result"
+                    (onClick)="resultClicked(result.title)" />
             </ion-list>
         </div>
     </ion-content>
diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index 2f7796a70..ce17902b3 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
@@ -14,27 +14,27 @@
 <ion-content>
     <ion-list class="list-item-limited-width">
         <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" [detail]="true">
-            <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="far-copyright" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
         </ion-item>
         <ion-item *ngIf="privacyPolicy" class="ion-text-wrap" button core-link auto-login="no" [href]="privacyPolicy" [detail]="true"
             detailIcon="open-outline">
-            <ion-icon name="fas-user-shield" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-user-shield" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
         </ion-item>
         <ion-item *ngIf="a11yStatement" class="ion-text-wrap" button core-link auto-login="no" [href]="a11yStatement" [detail]="true"
             detailIcon="open-outline">
-            <ion-icon name="fas-universal-access" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-universal-access" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.settings.accessstatement' | translate }}</ion-label>
         </ion-item>
         <ion-item *ngIf="currentSite && feedbackFormUrl && showSurvey" class="ion-text-wrap" button core-link [href]="feedbackFormUrl"
             [detail]="true" detailIcon="open-outline">
-            <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.settings.helpusimprove' | translate }}</ion-label>
         </ion-item>
         <ion-item *ngIf="legalDisclaimer" class="ion-text-wrap" button core-link auto-login="no" [href]="legalDisclaimer" [detail]="true"
             detailIcon="open-outline">
-            <ion-icon name="fas-scale-balanced" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-scale-balanced" slot="start" aria-hidden="true" />
             <ion-label>{{ 'core.settings.legaldisclaimer' | translate }}</ion-label>
         </ion-item>
     </ion-list>
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index 0daa68c2b..107d688b1 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -10,7 +10,7 @@
 
         <ion-buttons slot="end" *ngIf="siteId">
             <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
-                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -22,20 +22,19 @@
                 <p class="item-heading">Change text direction</p>
                 <p>{{ direction }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()" slot="end" />
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
                 <p class="item-heading">Force safe area margins</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()" slot="end" />
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="stagingSitesCount && enableStagingSites !== undefined">
             <ion-label>
                 <h2>Enable staging sites ({{stagingSitesCount}})</h2>
             </ion-label>
-            <ion-toggle [(ngModel)]="enableStagingSites" (ionChange)="setEnabledStagingSites($event.detail.checked)" slot="end">
-            </ion-toggle>
+            <ion-toggle [(ngModel)]="enableStagingSites" (ionChange)="setEnabledStagingSites($event.detail.checked)" slot="end" />
 
         </ion-item>
         <ng-container *ngIf="siteId">
@@ -44,14 +43,14 @@
                     <p class="item-heading">Enable remote styles <ion-badge>{{remoteStylesCount}}</ion-badge>
                     </p>
                 </ion-label>
-                <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()" slot="end"></ion-toggle>
+                <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()" slot="end" />
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">Enable site plugin styles <ion-badge>{{pluginStylesCount}}</ion-badge>
                     </p>
                 </ion-label>
-                <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()" slot="end"></ion-toggle>
+                <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()" slot="end" />
             </ion-item>
         </ng-container>
 
@@ -60,7 +59,7 @@
                 <p class="item-heading">Reset user tours</p>
             </ion-label>
             <ion-button (click)="resetUserTours()" aria-label="Reset user tours" fill="clear" slot="end">
-                <ion-icon slot="icon-only" aria-hidden="true" name="fas-repeat"></ion-icon>
+                <ion-icon slot="icon-only" aria-hidden="true" name="fas-repeat" />
             </ion-button>
         </ion-item>
 
@@ -69,7 +68,7 @@
                 <p class="item-heading">Invalidate caches</p>
             </ion-label>
             <ion-button (click)="invalidateCaches()" aria-label="Invalidate caches" fill="clear" slot="end">
-                <ion-icon slot="icon-only" aria-hidden="true" name="fas-rotate-right"></ion-icon>
+                <ion-icon slot="icon-only" aria-hidden="true" name="fas-rotate-right" />
             </ion-button>
         </ion-item>
 
@@ -85,7 +84,7 @@
                 <p>Clear deleted sites from file storage and temp folder</p>
             </ion-label>
             <ion-button (click)="clearFileStorage()" aria-label="Clear File Storage" fill="clear" slot="end">
-                <ion-icon slot="icon-only" aria-hidden="true" name="fas-broom"></ion-icon>
+                <ion-icon slot="icon-only" aria-hidden="true" name="fas-broom" />
             </ion-button>
         </ion-item>
 
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index c4da48990..98a838f0f 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
@@ -10,7 +10,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
-                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -19,7 +19,7 @@
 <ion-content>
     <ion-list class="list-item-limited-width">
         <ion-item *ngIf="showDevOptions" [detail]="true" (click)="gotoDevOptions()">
-            <ion-icon name="fas-terminal" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-terminal" slot="start" aria-hidden="true" />
             <ion-label class="ion-text-wrap">
                 <p class="item-heading">{{ 'core.settings.developeroptions' | translate }}</p>
             </ion-label>
diff --git a/src/core/features/settings/pages/error-log/error-log.html b/src/core/features/settings/pages/error-log/error-log.html
index 7647af8c7..8a8c0a442 100644
--- a/src/core/features/settings/pages/error-log/error-log.html
+++ b/src/core/features/settings/pages/error-log/error-log.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -10,7 +10,7 @@
 
         <ion-buttons slot="end" *ngIf="errorLogs.length">
             <ion-button fill="clear" (click)="copyError()" [attr.aria-label]="'core.settings.copyinfo' | translate">
-                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
@@ -45,7 +45,6 @@
         </ion-item>
     </ion-list>
     <ng-template #noLogs>
-        <core-empty-box message="No logs available" icon="fas-clipboard-question">
-        </core-empty-box>
+        <core-empty-box message="No logs available" icon="fas-clipboard-question" />
     </ng-template>
 </ion-content>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index 90843dac5..f73deaa03 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -57,7 +57,7 @@
                 <p class="item-heading">{{ 'core.settings.enablerichtexteditor' | translate }}</p>
                 <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)" slot="end" />
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
             <ion-label>
@@ -73,14 +73,14 @@
                 <p class="item-heading">{{ 'core.settings.debugdisplay' | translate }}</p>
                 <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)" slot="end" />
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="analyticsAvailable">
             <ion-label>
                 <p class="item-heading">{{ 'core.settings.enableanalytics' | translate }}</p>
                 <p>{{ 'core.settings.enableanalyticsdescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged($event)" slot="end"></ion-toggle>
+            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged($event)" slot="end" />
         </ion-item>
     </ion-list>
 </ion-content>
diff --git a/src/core/features/settings/pages/index/index.html b/src/core/features/settings/pages/index/index.html
index d9cca2a34..7b6374247 100644
--- a/src/core/features/settings/pages/index/index.html
+++ b/src/core/features/settings/pages/index/index.html
@@ -1,12 +1,12 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.settings.appsettings' | translate }}</h1>
         </ion-title>
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -14,7 +14,7 @@
         <ion-list>
             <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button
                 [detail]="true" (click)="sections.select(section)">
-                <ion-icon [name]="section.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon [name]="section.icon" slot="start" aria-hidden="true" />
                 <ion-label>{{ section.name | translate }}</ion-label>
             </ion-item>
         </ion-list>
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index b883d1942..99d366555 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -12,8 +12,7 @@
 <ion-content class="limited-width">
     <core-loading [hideUntil]="loaded">
         <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
-            [placeholder]="'core.filter' | translate" class="ion-margin-top">
-        </ion-searchbar>
+            [placeholder]="'core.filter' | translate" class="ion-margin-top" />
         <ion-list>
             <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no" [detail]="false">
                 <ion-label>
diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index 5b940b309..d463d1ba9 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -1,33 +1,30 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.settings.preferences' | translate}}</h1>
         </ion-title>
-        <ion-buttons slot="end">
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!handlers.loaded" (ionRefresh)="refreshData($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="handlers.loaded">
             <ion-list>
                 <ion-item *ngFor="let handler of handlerItems" class="core-settings-handler" [ngClass]="handler.class"
                     [attr.aria-label]="handler.title | translate" (click)="!handler.toggle && handlers.select(handler)"
                     [button]="!handler.toggle" [detail]="!handler.toggle" [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
-                    <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true">
-                    </ion-icon>
+                    <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true" />
                     <ion-label>
                         <p class="item-heading">{{ handler.title | translate}}</p>
                     </ion-label>
                     <ion-toggle *ngIf="handler.toggle" [(ngModel)]="handler.toggleChecked"
-                        (ionChange)="handler.toggle($event.detail.checked)" slot="end">
-                    </ion-toggle>
+                        (ionChange)="handler.toggle($event.detail.checked)" slot="end" />
                 </ion-item>
             </ion-list>
 
@@ -42,12 +39,12 @@
                     <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
                         <ion-button fill="clear" (click)="synchronize()" [attr.aria-label]="'core.settings.synchronizenow' | translate"
                             [disabled]="!isOnline || (dataSaver && limitedConnection)">
-                            <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </core-button-with-spinner>
                 </ion-item>
                 <ion-item class="core-warning-item ion-text-wrap" *ngIf="!isOnline || (dataSaver && limitedConnection)">
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>
                         <ng-container *ngIf="isOnline && dataSaver && limitedConnection">
                             {{ 'core.settings.connectwifitosync' | translate }}</ng-container>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 939553d14..519d8db67 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -1,20 +1,19 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.settings.spaceusage' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-navbar-buttons>
-            </core-navbar-buttons>
+            <core-navbar-buttons />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher [disabled]="!loaded" (ionRefresh)="refreshData($event.target)" slot="fixed">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list class="limited-width">
@@ -27,8 +26,7 @@
                     <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage(site)"
                         [hidden]="site.spaceUsage <= 0 && !site.hasCacheEntries">
                         <ion-icon name="fas-trash" slot="icon-only"
-                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: site.siteName }">
-                        </ion-icon>
+                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: site.siteName }" />
                     </ion-button>
                 </ng-template>
             </core-sites-list>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index ab6439509..f46cde682 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.settings.synchronization' | translate }}</h1>
@@ -9,7 +9,7 @@
         <ion-buttons slot="end">
             <core-navbar-buttons>
                 <ion-button (click)="showInfo()" [attr.aria-label]="'core.info' | translate">
-                    <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </core-navbar-buttons>
         </ion-buttons>
@@ -29,13 +29,12 @@
                         {{ 'core.settings.syncdatasaver' | translate }}
                     </p>
                 </ion-label>
-                <ion-toggle slot="end" [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()">
-                </ion-toggle>
+                <ion-toggle slot="end" [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()" />
             </ion-item>
 
             <ion-card class="core-warning-card" *ngIf="!isOnline || (dataSaver && limitedConnection)">
                 <ion-item class="ion-text-wrap">
-                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                     <ion-label>
                         <ng-container *ngIf="isOnline && dataSaver && limitedConnection">
                             {{ 'core.settings.connectwifitosync' | translate }}</ng-container>
@@ -60,12 +59,12 @@
                         <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end" *ngIf="!site.loggedOut">
                             <ion-button fill="clear" (click)="synchronize(site.id)"
                                 [attr.aria-label]="'core.settings.synchronizenow' | translate">
-                                <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true"></ion-icon>
+                                <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                             </ion-button>
                         </core-button-with-spinner>
                         <ion-button fill="clear" (click)="login(site.id)" [attr.aria-label]="'core.login.login' | translate"
                             *ngIf="site.loggedOut" slot="end">
-                            <ion-icon name="fas-right-to-bracket" slot="icon-only" aria-hidden="true"></ion-icon>
+                            <ion-icon name="fas-right-to-bracket" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ng-template>
                 </core-sites-list>
diff --git a/src/core/features/sharedfiles/components/list-modal/list-modal.html b/src/core/features/sharedfiles/components/list-modal/list-modal.html
index 669934cbe..8b1161c97 100644
--- a/src/core/features/sharedfiles/components/list-modal/list-modal.html
+++ b/src/core/features/sharedfiles/components/list-modal/list-modal.html
@@ -5,13 +5,12 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="true" [manage]="manage" [pick]="pick" [path]="path"
-        [showSitePicker]="!hideSitePicker" (onPathChanged)="calculateTitle($event)" (onFilePicked)="filePicked($event)">
-    </core-shared-files-list>
+        [showSitePicker]="!hideSitePicker" (onPathChanged)="calculateTitle($event)" (onFilePicked)="filePicked($event)" />
 </ion-content>
diff --git a/src/core/features/sharedfiles/components/list/list.html b/src/core/features/sharedfiles/components/list/list.html
index 51823b9a7..5dfc856ca 100644
--- a/src/core/features/sharedfiles/components/list/list.html
+++ b/src/core/features/sharedfiles/components/list/list.html
@@ -1,29 +1,25 @@
 <ion-refresher slot="fixed" [disabled]="!filesLoaded" (ionRefresh)="refreshFiles($event.target)">
-    <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+    <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
 </ion-refresher>
 
 <!-- Allow selecting the site to view. -->
-<core-site-picker *ngIf="showSitePicker" [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)">
-</core-site-picker>
+<core-site-picker *ngIf="showSitePicker" [hidden]="!filesLoaded" [initialSite]="siteId" (siteSelected)="changeSite($event)" />
 
 <core-loading [hideUntil]="filesLoaded" [fullscreen]="false">
     <ion-list *ngIf="files && files.length > 0">
         <ng-container *ngFor="let file of files; let idx = index">
             <core-local-file *ngIf="file.isFile" [file]="file" [manage]="manage" [overrideClick]="pick" (onClick)="filePicked(file)"
-                (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)">
-            </core-local-file>
+                (onDelete)="fileDeleted(idx)" (onRename)="fileRenamed(idx, $event)" />
 
             <ion-item button *ngIf="!file.isFile" class="ion-text-wrap item-file item-directory" (click)="openFolder(file)" [detail]="true">
-                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate"></ion-icon>
+                <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.folder' | translate" />
                 <ion-label>{{ file.name }}</ion-label>
             </ion-item>
         </ng-container>
     </ion-list>
 
-    <core-empty-box *ngIf="files && !files.length && manage" icon="fas-folder" [message]="'core.sharedfiles.nosharedfiles' | translate">
-    </core-empty-box>
+    <core-empty-box *ngIf="files && !files.length && manage" icon="fas-folder" [message]="'core.sharedfiles.nosharedfiles' | translate" />
 
     <core-empty-box *ngIf="files && !files.length && !manage" icon="fas-folder"
-        [message]="'core.sharedfiles.nosharedfilestoupload' | translate">
-    </core-empty-box>
+        [message]="'core.sharedfiles.nosharedfilestoupload' | translate" />
 </core-loading>
diff --git a/src/core/features/sharedfiles/pages/choose-site/choose-site.html b/src/core/features/sharedfiles/pages/choose-site/choose-site.html
index 4c56c753d..9009885cf 100644
--- a/src/core/features/sharedfiles/pages/choose-site/choose-site.html
+++ b/src/core/features/sharedfiles/pages/choose-site/choose-site.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.sharedfiles.sharedfiles' | translate }}</h1>
@@ -17,8 +17,7 @@
                     <p>{{fileName}}</p>
                 </ion-label>
             </ion-item>
-            <core-sites-list [accountsList]="accountsList" [sitesClickable]="true" (onSiteClicked)="storeInSite($event)">
-            </core-sites-list>
+            <core-sites-list [accountsList]="accountsList" [sitesClickable]="true" (onSiteClicked)="storeInSite($event)" />
         </ion-list>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/sharedfiles/pages/list/list.html b/src/core/features/sharedfiles/pages/list/list.html
index b5b619acd..b230fd7ce 100644
--- a/src/core/features/sharedfiles/pages/list/list.html
+++ b/src/core/features/sharedfiles/pages/list/list.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
@@ -10,6 +10,5 @@
 </ion-header>
 <ion-content>
     <core-shared-files-list [siteId]="siteId" [mimetypes]="mimetypes" [isModal]="false" [manage]="manage" [pick]="false" [path]="path"
-        [showSitePicker]="showSitePicker" (onPathChanged)="calculateTitle($event)">
-    </core-shared-files-list>
+        [showSitePicker]="showSitePicker" (onPathChanged)="calculateTitle($event)" />
 </ion-content>
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 4d80cc5c1..efc616e35 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -1,11 +1,11 @@
 <core-navbar-buttons slot="end" prepend>
     <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="doRefresh($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
         <ion-list class="core-course-module-list-wrapper">
@@ -13,17 +13,16 @@
             <ng-container *ngIf="section && section.hasContent">
                 <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
                     <ion-label>
-                        <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId">
-                        </core-format-text>
+                        <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId" />
                     </ion-label>
                 </ion-item>
 
-                <core-course-module *ngFor="let module of section.modules" [module]="module" [section]="section"></core-course-module>
+                <core-course-module *ngFor="let module of section.modules" [module]="module" [section]="section" />
             </ng-container>
 
             <!-- Site home items: news, categories, courses, etc. -->
             <ng-container *ngIf="items.length > 0">
-                <core-spacer *ngIf="section && section!.hasContent"></core-spacer>
+                <core-spacer *ngIf="section && section!.hasContent" />
                 <ng-container *ngFor="let item of items">
                     <ng-container [ngSwitch]="item">
                         <ng-container *ngSwitchCase="'LIST_OF_COURSE'">
@@ -45,19 +44,16 @@
                 </ng-container>
             </ng-container>
         </ion-list>
-        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" contextLevel="course" [instanceId]="siteHomeId">
-        </core-block-side-blocks-button>
+        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" contextLevel="course" [instanceId]="siteHomeId" />
 
-        <core-empty-box *ngIf="!hasContent" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate">
-
-        </core-empty-box>
+        <core-empty-box *ngIf="!hasContent" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate" />
     </core-loading>
 </ion-content>
 
 <ng-template #allCourseList>
     <ion-card>
         <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
-            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.availablecourses' | translate}}</p>
             </ion-label>
@@ -66,14 +62,13 @@
 </ng-template>
 
 <ng-template #news>
-    <core-course-module class="core-sitehome-news" *ngIf="newsForumModule" [module]="newsForumModule">
-    </core-course-module>
+    <core-course-module class="core-sitehome-news" *ngIf="newsForumModule" [module]="newsForumModule" />
 </ng-template>
 
 <ng-template #categories>
     <ion-card>
         <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
-            <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-folder" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
             </ion-label>
@@ -84,8 +79,7 @@
 <ng-template #enrolledCourseList>
     <ion-card>
         <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
-            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
-            </ion-icon>
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.mycourses' | translate}}</p>
             </ion-label>
@@ -96,7 +90,7 @@
 <ng-template #courseSearch>
     <ion-card>
         <ion-item button class="ion-text-wrap" (click)="openSearch()">
-            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
             <ion-label>
                 <p class="item-heading">{{ 'core.courses.searchcourses' | translate}}</p>
             </ion-label>
diff --git a/src/core/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html b/src/core/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html
+++ b/src/core/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html b/src/core/features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html
+++ b/src/core/features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/block/core-siteplugins-block.html b/src/core/features/siteplugins/components/block/core-siteplugins-block.html
index 4198fb8c6..09636a7ca 100644
--- a/src/core/features/siteplugins/components/block/core-siteplugins-block.html
+++ b/src/core/features/siteplugins/components/block/core-siteplugins-block.html
@@ -1,3 +1,2 @@
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
-    [initResult]="initResult">
-</core-site-plugins-plugin-content>
+    [initResult]="initResult" />
diff --git a/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html b/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html
index 875413506..8ccd604a3 100644
--- a/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html
+++ b/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html
@@ -1,3 +1,2 @@
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
-    [initResult]="initResult" [data]="data">
-</core-site-plugins-plugin-content>
+    [initResult]="initResult" [data]="data" />
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 d609e5f25..7eb7bd09a 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,19 +1,16 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button fill="clear" (click)="openModuleSummary()" [attr.aria-label]="'core.info' | translate">
-        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
 
 <!-- Activity info. -->
-<core-course-module-info [module]="module" [courseId]="courseId" [component]="component" [componentId]="module.id">
-</core-course-module-info>
+<core-course-module-info [module]="module" [courseId]="courseId" [component]="component" [componentId]="module.id" />
 
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
     [initResult]="initResult" [data]="jsData" [pageTitle]="pageTitle" [preSets]="preSets" (onContentLoaded)="contentLoaded($event)"
-    (onLoadingContent)="contentLoading()">
-</core-site-plugins-plugin-content>
+    (onLoadingContent)="contentLoading()" />
 
 <core-course-module-navigation collapsible-footer [appearOnBottom]="collapsibleFooterAppearOnBottom" *ngIf="module" [courseId]="courseId"
-    [currentModuleId]="module.id">
-</core-course-module-navigation>
+    [currentModuleId]="module.id" />
diff --git a/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html b/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
index 2126b11fb..4ae340d76 100644
--- a/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
+++ b/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
@@ -1,4 +1,3 @@
 <core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
-    <core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile>
-    </core-compile-html>
+    <core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile />
 </core-loading>
diff --git a/src/core/features/siteplugins/components/question-behaviour/core-siteplugins-question-behaviour.html b/src/core/features/siteplugins/components/question-behaviour/core-siteplugins-question-behaviour.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/question-behaviour/core-siteplugins-question-behaviour.html
+++ b/src/core/features/siteplugins/components/question-behaviour/core-siteplugins-question-behaviour.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/question/core-siteplugins-question.html b/src/core/features/siteplugins/components/question/core-siteplugins-question.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/question/core-siteplugins-question.html
+++ b/src/core/features/siteplugins/components/question/core-siteplugins-question.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/quiz-access-rule/core-siteplugins-quiz-access-rule.html b/src/core/features/siteplugins/components/quiz-access-rule/core-siteplugins-quiz-access-rule.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/quiz-access-rule/core-siteplugins-quiz-access-rule.html
+++ b/src/core/features/siteplugins/components/quiz-access-rule/core-siteplugins-quiz-access-rule.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/user-profile-field/core-siteplugins-user-profile-field.html b/src/core/features/siteplugins/components/user-profile-field/core-siteplugins-user-profile-field.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/user-profile-field/core-siteplugins-user-profile-field.html
+++ b/src/core/features/siteplugins/components/user-profile-field/core-siteplugins-user-profile-field.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/components/workshop-assessment-strategy/core-siteplugins-workshop-assessment-strategy.html b/src/core/features/siteplugins/components/workshop-assessment-strategy/core-siteplugins-workshop-assessment-strategy.html
index f58bcd913..469fc233e 100644
--- a/src/core/features/siteplugins/components/workshop-assessment-strategy/core-siteplugins-workshop-assessment-strategy.html
+++ b/src/core/features/siteplugins/components/workshop-assessment-strategy/core-siteplugins-workshop-assessment-strategy.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)"></core-compile-html>
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
diff --git a/src/core/features/siteplugins/pages/course-option/core-siteplugins-course-option.html b/src/core/features/siteplugins/pages/course-option/core-siteplugins-course-option.html
index bb6328cbb..d34f71c55 100644
--- a/src/core/features/siteplugins/pages/course-option/core-siteplugins-course-option.html
+++ b/src/core/features/siteplugins/pages/course-option/core-siteplugins-course-option.html
@@ -1,9 +1,8 @@
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!ptrEnabled || !content || !content.dataLoaded"
         (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
-        [initResult]="initResult">
-    </core-site-plugins-plugin-content>
+        [initResult]="initResult" />
 </ion-content>
diff --git a/src/core/features/siteplugins/pages/module-index/module-index.html b/src/core/features/siteplugins/pages/module-index/module-index.html
index 58f3efc7c..aa6c38d05 100644
--- a/src/core/features/siteplugins/pages/module-index/module-index.html
+++ b/src/core/features/siteplugins/pages/module-index/module-index.html
@@ -1,21 +1,19 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- If the site plugin defines some buttons using core-nav-buttons, they will be added here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!content || !content.ptrEnabled || !content.content || !content.content.dataLoaded"
         (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-site-plugins-module-index [module]="module" [courseId]="courseId" [pageTitle]="title"></core-site-plugins-module-index>
+    <core-site-plugins-module-index [module]="module" [courseId]="courseId" [pageTitle]="title" />
 </ion-content>
diff --git a/src/core/features/siteplugins/pages/plugin/plugin.html b/src/core/features/siteplugins/pages/plugin/plugin.html
index 704dea867..ee8ef621c 100644
--- a/src/core/features/siteplugins/pages/plugin/plugin.html
+++ b/src/core/features/siteplugins/pages/plugin/plugin.html
@@ -1,22 +1,19 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="title">{{ title | translate }}</h1>
         </ion-title>
 
-        <ion-buttons slot="end">
-            <!-- If the site plugin defines some buttons using core-nav-buttons, they will be added here. -->
-        </ion-buttons>
+        <ion-buttons slot="end" />
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!ptrEnabled || !content || !content.dataLoaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-site-plugins-plugin-content [component]="component" [method]="method" [args]="args" [preSets]="preSets" [initResult]="initResult"
-        [data]="jsData" [pageTitle]="title">
-    </core-site-plugins-plugin-content>
+        [data]="jsData" [pageTitle]="title" />
 </ion-content>
diff --git a/src/core/features/tag/components/feed/core-tag-feed.html b/src/core/features/tag/components/feed/core-tag-feed.html
index 1223943fe..b2dbea3c2 100644
--- a/src/core/features/tag/components/feed/core-tag-feed.html
+++ b/src/core/features/tag/components/feed/core-tag-feed.html
@@ -1,9 +1,8 @@
 <ion-card *ngFor="let item of items">
     <ion-item class="ion-text-wrap" [href]="item.url" core-link [capture]="true">
-        <core-user-avatar *ngIf="item.avatarUrl" [profileUrl]="item.avatarUrl" slot="start" [linkProfile]="false"></core-user-avatar>
+        <core-user-avatar *ngIf="item.avatarUrl" [profileUrl]="item.avatarUrl" slot="start" [linkProfile]="false" />
 
-        <core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
-        </core-mod-icon>
+        <core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false" />
         <ion-label>
             <p class="item-heading">{{ item.heading }}</p>
             <p *ngFor="let text of item.details">{{ text }}</p>
diff --git a/src/core/features/tag/pages/index-area/index-area.html b/src/core/features/tag/pages/index-area/index-area.html
index a23e1f352..5d96270d6 100644
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>
@@ -12,11 +12,10 @@
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError">
-        </core-infinite-loading>
+        <core-dynamic-component [component]="areaComponent" [data]="{items: items}" />
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/tag/pages/index/index.html b/src/core/features/tag/pages/index/index.html
index 3e8f9c87e..e409114c7 100644
--- a/src/core/features/tag/pages/index/index.html
+++ b/src/core/features/tag/pages/index/index.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.tag.tag' | translate }}: {{ tagName }}</h1>
@@ -12,12 +12,12 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
         <core-loading [hideUntil]="loaded">
             <ion-list *ngIf="hasUnsupportedAreas || areas.length">
                 <ion-item *ngIf="hasUnsupportedAreas" class="core-warning-item">
-                    <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true"></ion-icon>
+                    <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true" />
                     <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let area of areas" [attr.aria-label]="area.nameKey | translate"
@@ -32,7 +32,7 @@
                 </ion-item>
             </ion-list>
             <core-empty-box icon="fas-tag" *ngIf="!hasUnsupportedAreas && (!areas || !areas.length)"
-                [message]="'core.tag.noresultsfor' | translate: { $a: tagName }"></core-empty-box>
+                [message]="'core.tag.noresultsfor' | translate: { $a: tagName }" />
         </core-loading>
     </core-split-view>
 </ion-content>
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index f428692cb..40a682ac7 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -1,25 +1,25 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.tag.searchtags' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <core-user-menu-button></core-user-menu-button>
+            <core-user-menu-button />
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <ion-grid class="safe-area-padding">
         <ion-row class="ion-no-padding ion-wrap">
             <ion-col class="ion-no-padding" size="12" size-sm="6" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
                 <core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching"
-                    autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0" searchArea="CoreTag"></core-search-box>
+                    autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0" searchArea="CoreTag" />
             </ion-col>
             <ion-col class="ion-no-padding" size="12" size-sm="6" *ngIf="collections && collections.length > 1">
                 <core-combobox [selection]="collectionId" (onChange)="searchTags(query, $event)" [disabled]="searching">
@@ -34,7 +34,7 @@
     </ion-grid>
     <core-loading [hideUntil]="loaded && !searching">
         <core-empty-box *ngIf="!cloud || !cloud!.tags || !cloud!.tags.length" icon="fas-tags"
-            [message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>
+            [message]="'core.tag.notagsfound' | translate: {$a: query}" />
 
         <ng-container *ngIf="cloud && cloud!.tags && cloud!.tags.length > 0">
             <div class="ion-text-center core-tag-cloud">
diff --git a/src/core/features/user/components/tag-area/core-user-tag-area.html b/src/core/features/user/components/tag-area/core-user-tag-area.html
index ccba8b626..8fc2eb065 100644
--- a/src/core/features/user/components/tag-area/core-user-tag-area.html
+++ b/src/core/features/user/components/tag-area/core-user-tag-area.html
@@ -1,6 +1,6 @@
 <ion-card *ngFor="let item of items">
     <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
-        <core-user-avatar [user]="item.user" slot="start" [linkProfile]="false"></core-user-avatar>
+        <core-user-avatar [user]="item.user" slot="start" [linkProfile]="false" />
         <ion-label>
             <p class="item-heading">{{ item.heading }}</p>
         </ion-label>
diff --git a/src/core/features/user/components/user-profile-field/core-user-profile-field.html b/src/core/features/user/components/user-profile-field/core-user-profile-field.html
index 1f3a37007..4d97bf5b0 100644
--- a/src/core/features/user/components/user-profile-field/core-user-profile-field.html
+++ b/src/core/features/user/components/user-profile-field/core-user-profile-field.html
@@ -1 +1 @@
-<core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
+<core-dynamic-component [component]="componentClass" [data]="data" />
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 128d010ad..932b5f5f8 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ 'core.user.profile' | translate }}</h1>
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
@@ -18,7 +18,7 @@
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
                     <ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
                         [attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
-                        <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
+                        <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
                     </ion-button>
                 </core-user-avatar>
                 <ion-label>
@@ -29,8 +29,7 @@
             <ion-item class="ion-text-wrap" *ngIf="user.description" lines="full">
                 <ion-label>
                     <p>
-                        <core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id">
-                        </core-format-text>
+                        <core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id" />
                     </p>
                 </ion-label>
             </ion-item>
@@ -129,13 +128,11 @@
                     </ion-label>
                 </ion-item>
                 <core-user-profile-field *ngFor="let field of user.customfields" [field]="field" contextLevel="course"
-                    [contextInstanceId]="courseId" [courseId]="courseId">
-                </core-user-profile-field>
+                    [contextInstanceId]="courseId" [courseId]="courseId" />
             </ion-item-group>
         </ion-list>
 
         <core-empty-box *ngIf="!user || (!hasContact && !hasDetails && !user.description)" icon="fas-user"
-            [message]=" 'core.user.detailsnotavailable' | translate">
-        </core-empty-box>
+            [message]=" 'core.user.detailsnotavailable' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/user/pages/complete-profile/complete-profile.html b/src/core/features/user/pages/complete-profile/complete-profile.html
index bc62ba89f..c3d28949c 100644
--- a/src/core/features/user/pages/complete-profile/complete-profile.html
+++ b/src/core/features/user/pages/complete-profile/complete-profile.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
 
         <ion-title>
@@ -11,7 +11,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
-                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
index c724447a0..4775bb79f 100644
--- a/src/core/features/user/pages/participants/participants.html
+++ b/src/core/features/user/pages/participants/participants.html
@@ -1,29 +1,25 @@
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!participants.loaded || searchInProgress" (ionRefresh)="refreshParticipants($event.target)">
-            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
         </ion-refresher>
 
         <core-search-box [disabled]="searchInProgress" [spellcheck]="false" [lengthCheck]="1" autocorrect="off"
-            searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()">
-        </core-search-box>
+            searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()" />
 
         <core-loading [hideUntil]="participants.loaded">
             <core-empty-box *ngIf="participants.empty && !searchInProgress && !searchQuery" icon="far-user"
-                [message]="'core.user.noparticipants' | translate">
-            </core-empty-box>
+                [message]="'core.user.noparticipants' | translate" />
 
             <core-empty-box *ngIf="participants.empty && !searchInProgress && searchQuery" icon="fas-magnifying-glass"
-                [message]="'core.noresults' | translate">
-            </core-empty-box>
+                [message]="'core.noresults' | translate" />
 
             <ion-list *ngIf="!participants.empty">
                 <ion-item *ngFor="let participant of participants.items" class="ion-text-wrap"
                     [attr.aria-current]="participants.getItemAriaCurrent(participant)" [attr.aria-label]="participant.fullname"
                     (click)="participants.select(participant)" button [detail]="true">
 
-                    <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start">
-                    </core-user-avatar>
+                    <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start" />
 
                     <ion-label>
                         <ng-container *ngIf="!searchQuery">
@@ -43,8 +39,7 @@
 
                         <ng-container *ngIf="searchQuery">
                             <p class="item-heading">
-                                <core-format-text [text]="participant.fullname" [highlight]="searchQuery" [filter]="false">
-                                </core-format-text>
+                                <core-format-text [text]="participant.fullname" [highlight]="searchQuery" [filter]="false" />
                             </p>
                         </ng-container>
                     </ion-label>
@@ -52,8 +47,7 @@
                 </ion-item>
             </ion-list>
             <core-infinite-loading [enabled]="participants.loaded && !participants.completed" (action)="fetchMoreParticipants($event)"
-                [error]="fetchMoreParticipantsFailed">
-            </core-infinite-loading>
+                [error]="fetchMoreParticipantsFailed" />
         </core-loading>
     </core-split-view>
 </ion-content>
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index 17a3ce676..94f262618 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -1,7 +1,7 @@
 <ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ user?.fullname }}</h1>
@@ -10,17 +10,16 @@
 </ion-header>
 <ion-content [core-swipe-navigation]="users" class="limited-width">
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="core-user-profile-maininfo ion-text-wrap" collapsible>
-                <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true" slot="start">
-                </core-user-avatar>
+                <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true" slot="start" />
                 <ion-label>
                     <h1>{{ user.fullname }}</h1>
                     <p *ngIf="user.address">
-                        <ion-icon name="fas-location-dot" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
+                        <ion-icon name="fas-location-dot" [attr.aria-hidden]="true" /> {{ user.address }}
                     </p>
                     <p *ngIf="rolesFormatted">
                         <strong>{{ 'core.user.roles' | translate}}</strong>{{'core.labelsep' | translate}}
@@ -41,31 +40,31 @@
                         <ion-button *ngFor="let handler of communicationHandlers" expand="block" size="default"
                             [ngClass]="['core-user-profile-handler', handler.class || '']" (click)="handlerClicked($event, handler)"
                             [hidden]="handler.hidden" [attr.aria-label]="handler.title | translate" [disabled]="handler.spinner">
-                            <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+                            <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" />
                             {{ handler.title | translate }}
                         </ion-button>
                     </ion-label>
                 </ion-item>
                 <div *ngIf="isLoadingHandlers" class="ion-text-center core-loading-handlers">
-                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                 </div>
             </div>
             <ion-item button class="ion-text-wrap core-user-profile-handler" (click)="openUserDetails()"
                 [attr.aria-label]="'core.user.details' | translate" [detail]="true">
-                <ion-icon name="fas-user" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-user" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ 'core.user.details' | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-center core-loading-handlers" *ngIf="isLoadingHandlers">
                 <ion-label>
-                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                 </ion-label>
             </ion-item>
             <ion-item button *ngFor="let handler of newPageHandlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
                 [ngClass]="['core-user-profile-handler', handler.class || '']" [hidden]="handler.hidden"
                 [attr.aria-label]="handler.title | translate" [detail]="true">
-                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" />
                 <ion-label>
                     <p class="item-heading">{{ handler.title | translate }}</p>
                 </ion-label>
@@ -75,25 +74,24 @@
                 <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
                     {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
                 </span>
-                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
-                </ion-spinner>
+                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate" />
             </ion-item>
             <ion-item *ngIf="actionHandlers && actionHandlers.length">
                 <ion-label>
                     <ion-button *ngFor="let handler of actionHandlers" expand="block" fill="outline" size="default"
                         [ngClass]="['core-user-profile-handler', handler.class || '']" (click)="handlerClicked($event, handler)"
                         [hidden]="handler.hidden" [attr.aria-label]="handler.title | translate" [disabled]="handler.spinner">
-                        <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
+                        <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" />
                         {{ handler.title | translate }}
-                        <ion-spinner *ngIf="handler.spinner" slot="end" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+                        <ion-spinner *ngIf="handler.spinner" slot="end" [attr.aria-label]="'core.loading' | translate" />
                     </ion-button>
                 </ion-label>
             </ion-item>
         </ion-list>
-        <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user" [message]=" 'core.user.detailsnotavailable' | translate">
-        </core-empty-box>
-        <core-empty-box *ngIf="isDeleted" icon="far-user" [message]="'core.userdeleted' | translate"></core-empty-box>
-        <core-empty-box *ngIf="isSuspended" icon="far-user" [message]="'core.usersuspended' | translate"></core-empty-box>
-        <core-empty-box *ngIf="!isEnrolled" icon="far-user" [message]="'core.notenrolledprofile' | translate"></core-empty-box>
+        <core-empty-box *ngIf="!user && !isDeleted && isEnrolled" icon="far-user"
+            [message]=" 'core.user.detailsnotavailable' | translate" />
+        <core-empty-box *ngIf="isDeleted" icon="far-user" [message]="'core.userdeleted' | translate" />
+        <core-empty-box *ngIf="isSuspended" icon="far-user" [message]="'core.usersuspended' | translate" />
+        <core-empty-box *ngIf="!isEnrolled" icon="far-user" [message]="'core.notenrolledprofile' | translate" />
     </core-loading>
 </ion-content>
diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index 3dadd8513..b3ba23c73 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -11,18 +11,18 @@
     <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
         <ion-col size="auto">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
-        <ion-col></ion-col>
+        <ion-col />
         <ion-col size="auto" *ngIf="swiper">
             <ion-button fill="clear" [attr.aria-label]="'core.zoomout' | translate" (click)="zoom(false)">
-                <ion-icon name="fas-magnifying-glass-minus" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass-minus" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
         <ion-col size="auto" *ngIf="swiper">
             <ion-button fill="clear" [attr.aria-label]="'core.zoomin' | translate" (click)="zoom(true)">
-                <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
     </ion-row>
diff --git a/src/core/features/viewer/components/qr-scanner/qr-scanner.html b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
index b572b1d0b..3fc073023 100644
--- a/src/core/features/viewer/components/qr-scanner/qr-scanner.html
+++ b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
@@ -5,10 +5,9 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true></ion-icon>
+                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden=true />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
-</ion-content>
+<ion-content />
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index dd0f64752..7753bb032 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -5,23 +5,22 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
     <core-format-text [text]="content" [component]="component" [componentId]="componentId" [filter]="filter" [contextLevel]="contextLevel"
-        [contextInstanceId]="instanceId" [courseId]="courseId">
-    </core-format-text>
+        [contextInstanceId]="instanceId" [courseId]="courseId" />
 
     <ion-card *ngIf="files?.length">
-        <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="componentId"></core-file>
+        <core-file *ngFor="let file of files" [file]="file" [component]="component" [componentId]="componentId" />
     </ion-card>
 </ion-content>
 <ion-footer *ngIf="displayCopyButton">
     <ion-button expand="block" fill="outline" (click)="copyText()">
-        <ion-icon name="fas-copy" aria-hidden="true" slot="start"></ion-icon>
+        <ion-icon name="fas-copy" aria-hidden="true" slot="start" />
         {{ 'core.copytoclipboard' | translate }}
     </ion-button>
 </ion-footer>
diff --git a/src/core/features/viewer/pages/iframe/iframe.html b/src/core/features/viewer/pages/iframe/iframe.html
index 16ecc4b39..f102eba35 100644
--- a/src/core/features/viewer/pages/iframe/iframe.html
+++ b/src/core/features/viewer/pages/iframe/iframe.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
+            <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
             <h1>{{ title }}</h1>
@@ -10,6 +10,6 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="url">
-        <core-iframe *ngIf="url" [src]="url" [allowAutoLogin]="autoLogin"></core-iframe>
+        <core-iframe *ngIf="url" [src]="url" [allowAutoLogin]="autoLogin" />
     </core-loading>
 </ion-content>