Why is a ViewChild element defined inside RouterOutlet's activate event and how reliable is...

I have the following layout in my Angular application:

@if(someAsyncValue | async) {
<div class="content-wrapper" #contentWrapper>
<div class="content">
<router-outlet (activate)="onActivate($event)"></router-outlet>
</div>
</div>
}


In my component, I am trying to access the contentWrapper element using @ViewChild:

@ViewChild('contentWrapper', { static: false }) contentWrapper!: ElementRef;

ngAfterViewInit(): void {
console.log('contentWrapper in AfterViewInit:', this.contentWrapper); // is undefined
}

onActivate(event: any): void {
console.log('contentWrapper:', this.contentWrapper); // is defined
}


As I cannot access contentWrapper element inside ngAfterViewInit, I was observing when it becomes defined and found that it is defined inside the onActivate method, which is triggered by the RouterOutlet's activate event.

Questions:

• Is it reliable to access @ViewChild references like contentWrapper inside the onActivate method in such a case?
• Are there any edge cases or situations where this approach might fail?

I found this, but it's about accessing child inside router outlet.

NOTE: I prefer not to use AfterViewChecked.

Any explanations or insights that can clarify this behavior would be appreciated.

Continue reading...