diff --git a/local_moodleappbehat/classes/output/mobile.php b/local_moodleappbehat/classes/output/mobile.php
index bddc07bd8..d2eda84db 100644
--- a/local_moodleappbehat/classes/output/mobile.php
+++ b/local_moodleappbehat/classes/output/mobile.php
@@ -27,16 +27,19 @@ class mobile {
      * @return array View data.
      */
     public static function view_index() {
+        global $OUTPUT;
+
         $templates = [
             [
                 'id' => 'main',
-                'html' => '<h1 class="text-center">Hello<span id="username"></span>!</h1>',
+                'html' => $OUTPUT->render_from_template('local_moodleappbehat/mobile', []),
             ],
         ];
 
+        $otherdata = ['answer' => null];
         $javascript = file_get_contents(__DIR__ . '/../../js/mobile/index.js');
 
-        return compact('templates', 'javascript');
+        return compact('templates', 'otherdata', 'javascript');
     }
 
 }
diff --git a/local_moodleappbehat/templates/mobile.mustache b/local_moodleappbehat/templates/mobile.mustache
new file mode 100644
index 000000000..d56f2fe4f
--- /dev/null
+++ b/local_moodleappbehat/templates/mobile.mustache
@@ -0,0 +1,15 @@
+{{=<% %>=}}
+<h1 class="text-center">Hello<span id="username"></span>!</h1>
+
+<ion-list>
+    <ion-item>
+        <ion-label position="floating">What is the answer to the Ultimate Question of Life, The Universe, and Everything?</ion-label>
+        <ion-input [(ngModel)]="CONTENT_OTHERDATA.answer"></ion-input>
+    </ion-item>
+    <ion-item *ngIf="CONTENT_OTHERDATA.answer === '42'">
+        <ion-label>That is correct!</ion-label>
+    </ion-item>
+    <ion-item *ngIf="CONTENT_OTHERDATA.answer && CONTENT_OTHERDATA.answer !== '42'">
+        <ion-label>That is not correct!</ion-label>
+    </ion-item>
+</ion-list>
diff --git a/patches/@angular+compiler+17.1.0.patch b/patches/@angular+compiler+17.1.0.patch
new file mode 100644
index 000000000..0e9a467be
--- /dev/null
+++ b/patches/@angular+compiler+17.1.0.patch
@@ -0,0 +1,46 @@
+diff --git a/node_modules/@angular/compiler/fesm2022/compiler.mjs b/node_modules/@angular/compiler/fesm2022/compiler.mjs
+index 5831cd3..c0ae072 100755
+--- a/node_modules/@angular/compiler/fesm2022/compiler.mjs
++++ b/node_modules/@angular/compiler/fesm2022/compiler.mjs
+@@ -6072,13 +6072,41 @@ var R3NgModuleMetadataKind;
+     R3NgModuleMetadataKind[R3NgModuleMetadataKind["Global"] = 0] = "Global";
+     R3NgModuleMetadataKind[R3NgModuleMetadataKind["Local"] = 1] = "Local";
+ })(R3NgModuleMetadataKind || (R3NgModuleMetadataKind = {}));
++
++/**
++ * These are the only modules we're using to compile dynamic templates, we don't need to force JIT anywhere else.
++ *
++ * In particular, they are imported like this:
++ *   - CommonModule
++ *   - FormsModule -> ɵInternalFormsSharedModule -> RadioControlRegistryModule
++ *   - IonicModule -> CommonModule
++ *   - ReactiveFormsModule -> ɵInternalFormsSharedModule -> RadioControlRegistryModule
++ *   - TranslateModule
++ */
++const jitModules = [
++    'CommonModule',
++    'FormsModule',
++    'IonicModule',
++    'ɵInternalFormsSharedModule',
++    'RadioControlRegistryModule',
++    'ReactiveFormsModule',
++    'TranslateModule',
++];
++
+ /**
+  * Construct an `R3NgModuleDef` for the given `R3NgModuleMetadata`.
+  */
+ function compileNgModule(meta) {
+     const statements = [];
+     const definitionMap = new DefinitionMap();
++    const moduleName = meta.type.value?.node.loc?.identifierName;
+     definitionMap.set('type', meta.type.value);
++
++    if (moduleName && jitModules.includes(moduleName)) {
++        // Force JIT compilation.
++        meta.selectorScopeMode = R3SelectorScopeMode.Inline;
++    }
++
+     // Assign bootstrap definition. In local compilation mode (i.e., for
+     // `R3NgModuleMetadataKind.LOCAL`) we assign the bootstrap field using the runtime
+     // `ɵɵsetNgModuleScope`.
diff --git a/src/core/features/siteplugins/tests/behat/plugins.feature b/src/core/features/siteplugins/tests/behat/plugins.feature
index 44119ea1b..708d831aa 100644
--- a/src/core/features/siteplugins/tests/behat/plugins.feature
+++ b/src/core/features/siteplugins/tests/behat/plugins.feature
@@ -19,3 +19,10 @@ Feature: Plugins work properly.
     When I press the more menu button in the app
     And I press "Moodle App Behat (auto-generated)" in the app
     Then I should find "Lifecycle hook called" in the app
+
+  Scenario: Use Angular directives
+    Given I entered the app as "studentusername"
+    When I press the more menu button in the app
+    And I press "Moodle App Behat (auto-generated)" in the app
+    And I set the field "the Ultimate Question" to "42" in the app
+    Then I should find "That is correct!" in the app