diff --git a/src/core/features/block/components/block/block.ts b/src/core/features/block/components/block/block.ts index 09e850ab26c..cfd7012b4f2 100644 --- a/src/core/features/block/components/block/block.ts +++ b/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; + readonly dynamicComponent = viewChild>(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 { - if (this.dynamicComponent) { - await this.dynamicComponent.callComponentMethod('invalidateContent'); - } + await this.dynamicComponent()?.callComponentMethod('invalidateContent'); } } diff --git a/src/core/features/courses/pages/my/my.ts b/src/core/features/courses/pages/my/my.ts index ec52fbea63e..6824b4097f5 100644 --- a/src/core/features/courses/pages/my/my.ts +++ b/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.