Merge pull request #4405 from alfonso-salces/MOBILE-4802

Mobile 4802

Author: crazyserver

src/core/features/block/components/block/block.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, ViewChild, OnDestroy, Type, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnDestroy, Type, OnChanges, SimpleChanges, viewChild } from '@angular/core';
 import { CoreBlockDelegate } from '../../services/block-delegate';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
 import { Subscription } from 'rxjs';
@@ -34,7 +34,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 })
 export class CoreBlockComponent implements OnChanges, OnDestroy {
 
-    @ViewChild(CoreDynamicComponent) dynamicComponent?: CoreDynamicComponent<ICoreBlockComponent>;
+    readonly dynamicComponent = viewChild<CoreDynamicComponent<ICoreBlockComponent>>(CoreDynamicComponent);
 
     @Input({ required: true }) block!: CoreCourseBlock; // The block to render.
     @Input({ required: true }) contextLevel!: ContextLevel; // The context where the block will be used.
@@ -118,9 +118,7 @@ export class CoreBlockComponent implements OnChanges, OnDestroy {
      * @returns Promise resolved when done.
      */
     async invalidate(): Promise<void> {
-        if (this.dynamicComponent) {
-            await this.dynamicComponent.callComponentMethod('invalidateContent');
-        }
+        await this.dynamicComponent()?.callComponentMethod('invalidateContent');
     }
 
 }

src/core/features/courses/pages/my/my.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { AddonBlockMyOverviewComponent } from '@addons/block/myoverview/components/myoverview/myoverview';
-import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, effect, OnDestroy, OnInit, viewChild, inject } from '@angular/core';
 import { AsyncDirective } from '@classes/async-directive';
 import { PageLoadsManager } from '@classes/page-loads-manager';
 import { CorePromisedValue } from '@classes/promised-value';
@@ -58,7 +58,7 @@ import { CoreCoursesMyPageName } from '@features/courses/constants';
 })
 export default class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirective {
 
-    @ViewChild(CoreBlockComponent) block!: CoreBlockComponent;
+    readonly block = viewChild(CoreBlockComponent);
 
     downloadCoursesEnabled = false;
     userId: number;
@@ -87,6 +87,15 @@ export default class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirect
             this.loadContent();
         });
 
+        effect(async () => {
+            const dynamicComponent = this.block()?.dynamicComponent();
+
+            if (dynamicComponent) {
+                await dynamicComponent.ready();
+                this.myOverviewBlock = dynamicComponent.instance;
+            }
+        });
+
         this.logView = CoreTime.once(async () => {
             await CorePromiseUtils.ignoreErrors(CoreCourses.logView('my'));
 
@@ -138,8 +147,6 @@ export default class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirect
 
                 await CoreWait.nextTicks(2);
 
-                this.myOverviewBlock = this.block?.dynamicComponent?.instance as AddonBlockMyOverviewComponent;
-
                 if (!this.loadedBlock && !supportsMyParam) {
                     // In old sites, display the block even if not found in Dashboard.
                     // This is because the "My courses" page doesn't exist in the site so it can't be configured.