is using computed to access the router out let view child make error?

i am trying to access router outlet using viewchild and then access the projected component and based on it access some values from it. when i used effect to do so it worked, but i thought using computed would be a better choise. but i got error like ERROR RuntimeError: NG04012: Outlet is not activated? why

import { Component, computed, inject, viewChild } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { LayoutTab } from '@features/bank-account-managments/models/layout-tab.model';
import { Tabs } from '@features/request-details/models/request-details.model';
import { TranslateModule } from '@ngx-translate/core';
import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb/breadcrumb.component';
import { BreadcrumbItems } from '@shared/components/breadcrumb/breadcrumb/breadcrumb.model';
import { ButtonComponent } from '@shared/components/button/button.component';
import { TabsViewComponent } from '@shared/components/tabs-view/tabs-view.component';
@Component({
selector: 'ncnp-bank-account-managment-layout',
standalone: true,
imports: [TabsViewComponent, ButtonComponent, BreadcrumbComponent, TranslateModule, RouterOutlet],
templateUrl: './bank-account-managment-layout.component.html',
styleUrl: './bank-account-managment-layout.component.scss'
})
export class BankAccountManagmentLayoutComponent {
routerOutlet = viewChild.required(RouterOutlet);
router = inject(Router);
routerEvent = toSignal(this.router.events);
isNavigationEnd = computed(() => this.routerEvent() instanceof NavigationEnd);
//varibales
breadcrumbItems: BreadcrumbItems = [
{
label: 'breadcrumbs.mainControlPanel'
},
{
label: 'myEntities.breadcrumb.myEntities'
},
{
label: 'myEntities.appointingLeadershipEmployee'
}
];
layoutHeader = computed(() => {
if (!this.isNavigationEnd()) return '';
console.log(this.routerOutlet());
const activeComponent = this.routerOutlet()?.component as LayoutTab;
return activeComponent?.LAYOUT_HEADER;
});
layoutActionButtonLabel = computed(() => {
return '';
console.log(this.routerOutlet());
const activeComponent = this.routerOutlet()?.component as LayoutTab;
return activeComponent?.LAYOUT_ACTION_BUTTON_LABEL;
});
takeAction = computed(() => {
return () => {};
console.log(this.routerOutlet());
const activeComponent = this.routerOutlet()?.component as LayoutTab;
return activeComponent?.takeAction;
});

tabs: Tabs[] = [
{
label: 'MANAGE_BANKS_ACCOUNTS.TABS.BANK_ACCOUNTS',
route: 'bank-accounts-managments/bank-accounts'
},
{
label: 'MANAGE_BANKS_ACCOUNTS.TABS.MANAGE_DELEGATES',
route: 'bank-accounts-managments/manage-delegates'
}
];
constructor() {
// effect(() => this.initializeLayout());
}
onActionButtonClick(): void {
this.takeAction()();
}
//private methods
// private initializeLayout() {
// const activeComponent = this.routerOutlet().component as LayoutTab;
// this.layoutHeader = activeComponent?.LAYOUT_HEADER;
// this.layoutActionButtonLabel = activeComponent?.LAYOUT_ACTION_BUTTON_LABEL;
// this.takeAction = activeComponent?.takeAction;
// }
}



i tried using computed and expect it to work but i got ERROR RuntimeError: NG04012: Outlet is not activated

Continue reading...