ivy ViewChild in ng-container of ngSwitch

🐞 bug report

Affected Package

@angular/core

Is this a regression?

Yes, the previous version 8 worked

Description

When using template ref in ngSwitch container in any life cycle of component ViewChild is always undefined

🔬 Minimal Reproduction

🔥 Exception or Error

ts:

@ViewChild('tip', { static: false })
public tip: NgbTooltip;

modeEnum: typeof GuiStatus = GuiStatus;
mode = GuiStatus.VIEW;

ngOnInit(): void {
    console.log('ngOnInit:tip', this.tip);    
}
ngOnChanges(_changes: SimpleChanges): void {
   console.log('ngOnChanges:tip', this.tip);
}

ngAfterViewInit(): void {
 console.log('ngAfterViewInit:tip', this.tip);
}

html:

<ng-container [ngSwitch]="mode">
  <ng-container *ngSwitchCase="modeEnum.VIEW">
     <i class="fas fa-info-circle text-primary"
             style="cursor:pointer"
             #tip="ngbTooltip"
             [ngbTooltip]="tipSource"
             tooltipClass="info-tooltip"></i>
  </ng-container>
</ng-container>

log:

ngOnChanges:tip undefined
ngOnInit:tip undefined
ngAfterViewInit:tip undefined

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.6
Node: 12.6.0
OS: win32 x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

[pkozlowski-opensource]

@sysmat for me it behaves as designed / implemented - when the ngAfterViewInit fires the element queried for is not yet available. Only after some delay, and in the subsequent change detection the element queried for is added to the DOM so only then you can access it. I think that what you need is the ngAfterViewChecked lifecycle hook (and obviously you would have to check if query has results): https://ng-run.com/edit/INoBryc4MfnkkQ2Hapyh?open=app%2Fuser-source%2Fuser-source.component.ts

[pkozlowski-opensource]

@JoostK your are totally right!!! This is my hasty copy & paste! This is why we need live reproduce scenarios!

Anyway, I’ve updated the repro to include querying both by a directive type and a local ref and indeed both seem to work as expected: https://ng-run.com/edit/WHoAaQmNxJLADbuqUwX8?open=app%2Fapp.component.ts

@sysmat could you please share the minimal reproduce scenario (you can modify the ng-run example I’ve provided) to expose the issue? As things stand right now I can’t reproduce so it is not actionable for us, I’m afraid…