Moodle mobile app docs update (new version 4.4.1 and more)

general/app/development/plugins-development-guide/examples/course-formats.md

@@ -53,28 +53,30 @@ class mobile {
 ```html handlebars title="templates/mobile_course.mustache"
 {{=<% %>=}}
 <core-dynamic-component [component]="coreCourseFormatComponent.allSectionsComponent" [data]="data" class="format-myformat">
-    <ng-container *ngFor="let section of sections">
+    @for (section of sections; track section.id) {
         <ion-item-divider>
             <ion-label>
                 <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
             </ion-label>
         </ion-item-divider>
 
-        <ion-item *ngIf="section.summary">
-            <ion-label>
-                <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
-                </core-format-text>
-            </ion-label>
-        </ion-item>
+        @if (section.summary) {
+            <ion-item>
+                <ion-label>
+                    <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
+                    </core-format-text>
+                </ion-label>
+            </ion-item>
+        }
 
-        <ng-container *ngFor="let module of section.modules">
-            <ng-container *ngIf="module.visibleoncoursepage !== 0">
+        @for (module of section.modules; track module.id) {
+            @if (module.visibleoncoursepage !== 0) {
                 <core-course-module [module]="module" [section]="section" (completionChanged)="onCompletionChange()">
                 </core-course-module>
-            </ng-container>
-        </ng-container>
-    </ng-container>
+            }
+        }
+    }
 </core-dynamic-component>
 ```
 
@@ -116,11 +118,11 @@ class mobile {
 Then filter the list of sections in your template:
 
 ```html
-<ng-container *ngFor="let section of sections">
-    <ng-container *ngIf="section.id in CONTENT_OTHERDATA.displaysections">
+@for (section of sections; track $index) {
+    @if (section.id in CONTENT_OTHERDATA.displaysections) {
         <!-- code to display the section goes here -->
-    </ng-container>
-</ng-container>
+    }
+}
 ```
 
 ## Using JavaScript

general/app/development/testing/unit-testing.md

@@ -128,7 +128,7 @@ Most services will be instantiated properly without mocks, but sometimes you may
 
 ## Testing components
 
-Angular components have a strong graphical part, but that doesn't mean that you can't test their logic and markup rendering using unit tests with Jest. You can follow [Angular's best practices for testing components](https://angular.io/guide/testing-components-scenarios), and we also provide a couple of helpers that make things easier.
+Angular components have a strong graphical part, but that doesn't mean that you can't test their logic and markup rendering using unit tests with Jest. You can follow [Angular's best practices for testing components](https://angular.dev/guide/testing/components-scenarios), and we also provide a couple of helpers that make things easier.
 
 Let's say you want to test the following component that render a list of user names:
 
@@ -138,7 +138,9 @@ Let's say you want to test the following component that render a list of user na
     template: `
         <h1>Users List</h1>
         <ul>
-            <li *ngFor="let user of users">{{ user }}</li>
+            @for (user of users; track $index) {
+                <li>{{ user }}</li>
+            }
         </ul>
     `,
 })

general/app_releases.md

@@ -10,6 +10,7 @@ tags:
 
 | **Version name** | **Date** |
 |---|---|
+| [Moodle App 4.4.1](./app_releases/v4/v4.4.1) |  9 July 2024 |
 | [Moodle App 4.4.0](./app_releases/v4/v4.4.0) |  28 June 2024 |
 | [Moodle App 4.3.0](./app_releases/v4/v4.3.0) |  10 November 2023 |
 | [Moodle App 4.2.0](./app_releases/v4/v4.2.0) |  9 June 2023 |

general/app_releases/v4/v4.4.0.md

@@ -38,7 +38,7 @@ Release date: 28 June 2024
 ### Task
 
 - [MOBILE-3947](https://tracker.moodle.org/browse/MOBILE-3947) - Upgrade to Ionic 7 and to Angular 17
-- [MOBILE-4357](https://tracker.moodle.org/browse/MOBILE-4357) - Upgrade Cordova and Android SDK to 34, cordova-android to 12 and cordova-ios to 7
+- [MOBILE-4357](https://tracker.moodle.org/browse/MOBILE-4357) - Upgrade Cordova, cordova-android to 12 and cordova-ios to 7
 - [MOBILE-4449](https://tracker.moodle.org/browse/MOBILE-4449) - Use Android photo picker to avoid using READ_MEDIA_IMAGES and READ_MEDIA_VIDEO
 - [MOBILE-4465](https://tracker.moodle.org/browse/MOBILE-4465) - Remove deprecated 4.0 code
 - [MOBILE-4492](https://tracker.moodle.org/browse/MOBILE-4492) - Upgrade cordova-plugin-file to 8.0.1, cordova-plugin-media-capture and use cordova-plugin-camera

general/app_releases/v4/v4.4.1.md

@@ -0,0 +1,26 @@
+---
+title: Moodle App 4.4.1 release notes
+sidebar_label: Moodle App 4.4.1
+tags:
+  - Moodle App
+  - Release notes
+---
+
+Release date: 9 July 2024
+
+## New features and improvements
+
+- Android target SDK updated to 34
+- Fix bug when playing embedded videos
+- Fix bug in certain courses using single activity formats
+
+## Complete list of issues
+
+### Task
+
+- [MOBILE-4621](https://tracker.moodle.org/browse/MOBILE-4621) - Update Android targetSdk to 34
+
+### Bug
+
+- [MOBILE-4620](https://tracker.moodle.org/browse/MOBILE-4620) - Some courses using single activity format do not work anymore in the app
+- [MOBILE-4624](https://tracker.moodle.org/browse/MOBILE-4624) - Iframes with inline styles aren't displayed in the app after 4.4 upgrade

general/development/policies/codingstyle-moodleapp.md

@@ -435,7 +435,7 @@ export class MyService {
 
 ### Avoid calling methods in templates
 
-Method calls should be avoided in template rendering, this includes structural directives such as `ngIf` or `ngFor`.
+Method calls should be avoided in template rendering, including structural directives like `ngIf` or `ngFor`. The same applies to the new control flow syntax with `@if` or `@for`.
 
 Angular templates can be rendered very often, and calling methods on every render could cause some unintended performance issues. For that reason, it is usually safer to rely on values rather than methods.
 
@@ -444,19 +444,19 @@ In some situations, a simple method that only returns a value would be acceptabl
 <ValidExample title="Good">
 
 ```html
-<div *ngIf="isAdmin">
-    <!-- Show admin content -->
-</div>
+@if (isAdmin) {
+    <div> <!-- Show admin content --> </div>
+}
 ```
 
 </ValidExample>
 
 <CodeExample type="warning" title="Allowed, but discouraged">
 
 ```html
-<div *ngIf="site.isAdmin()">
-    <!-- Show admin content -->
-</div>
+@if (site.isAdmin()) {
+    <div> <!-- Show admin content --> </div>
+}
 ```
 
 </CodeExample>
@@ -502,34 +502,37 @@ There is a maximum line length of 140 characters for templates. Whenever that le
 <ValidExample title="Good">
 
 ```html
-<ion-item
-    *ngFor="let course of courses" [title]="course.title"
-    [class.selected]="isSelected(course)" class="ion-text-wrap"
-    button detail="true"
-    (click)="selectCourse(course)">
-    <ion-label>
-        {{ course.title }}
-    </ion-label>
-</ion-item>
+@for (course of courses; track course.id) {
+    <ion-item
+        [title]="course.title"
+        [class.selected]="isSelected(course)" class="ion-text-wrap"
+        button detail="true"
+        (click)="selectCourse(course)">
+        <ion-label>
+            {{ course.title }}
+        </ion-label>
+    </ion-item>
+}
 ```
 
 </ValidExample>
 
 <InvalidExample title="Bad">
 
 ```html
-<ion-item
-    *ngFor="let course of courses"
-    [title]="course.title"
-    [class.selected]="isSelected(course)"
-    class="ion-text-wrap"
-    button
-    detail="true"
-    (click)="selectCourse(course)">
-    <ion-label>
-        {{ course.title }}
-    </ion-label>
-</ion-item>
+@for (course of courses; track course.id) {
+    <ion-item
+        [title]="course.title"
+        [class.selected]="isSelected(course)"
+        class="ion-text-wrap"
+        button
+        detail="true"
+        (click)="selectCourse(course)">
+        <ion-label>
+            {{ course.title }}
+        </ion-label>
+    </ion-item>
+}
 ```
 
 </InvalidExample>