ivy ViewChild in ng-container of ngSwitch

[sysmat]

🐞 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]

Minimal repro: https://ng-run.com/edit/WHoAaQmNxJLADbuqUwX8?open=app%2Fapp.component.ts

[JoostK]

@pkozlowski-opensource it looks like there's a bug in the reproduction. There's no "foo" local ref declared in the template. If I add #tip="ngbTooltip" to the i element and exportAs: 'ngbTooltip' to the directive then it does work for me.

[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..

[sysmat]

@pkozlowski-opensource thx for your effort

• Only what I can think my component is deeply nested and all data is async and a few if
• I will try to reproduce

[sysmat]

• I found the problem when I use '? aka elvise' operator in template it don't work, when I remove 'elvise' it works, but I got error in dev console Cannot read property of undefined which is correct because it is async and data came in on 'OnChanges' cycle
• @pkozlowski-opensource when I try in your runner works with 'elvise' operator but there is no async, ...

[pkozlowski-opensource]

@sysmat I'm afraid that we will really need to have a runnable reproduce scenario to be able understand what is going on....

[sysmat]

@pkozlowski-opensource I understand I'll try do it, a bit short with time

• not working snippet

<span *ngIf="user?.source === sourceEnum.SSOP || user?.source === sourceEnum.PREDALNIK">

          <i class="fas fa-info-circle text-primary"
             style="cursor:pointer"
             #tip="ngbTooltip"
             [ngbTooltip]="tipSource"
             tooltipClass="info-tooltip"></i>

          <ng-template #tipSource>
            <h5>Predal/ustvarjalnik</h5>
            <p>Previdno uporabnik je bil samostojno kreiran</p>
          </ng-template>
</span>

• not working snippet

<span *ngIf="user & (user.source === sourceEnum.SSOP || user.source === sourceEnum.PREDALNIK)">

          <i class="fas fa-info-circle text-primary"
             style="cursor:pointer"
             #tip="ngbTooltip"
             [ngbTooltip]="tipSource"
             tooltipClass="info-tooltip"></i>

          <ng-template #tipSource>
            <h5>Predal/ustvarjalnik</h5>
            <p>Previdno uporabnik je bil samostojno kreiran</p>
          </ng-template>
</span>

• working snippet

<span *ngIf="user.source === sourceEnum.SSOP || user.source === sourceEnum.PREDALNIK">

          <i class="fas fa-info-circle text-primary"
             style="cursor:pointer"
             #tip="ngbTooltip"
             [ngbTooltip]="tipSource"
             tooltipClass="info-tooltip"></i>

          <ng-template #tipSource>
            <h5>Predal/ustvarjalnik</h5>
            <p>Previdno uporabnik je bil samostojno kreiran</p>
          </ng-template>
</span>

[sysmat]

🔬 Minimal Reproduction

https://ng-run.com/edit/YgriA7D2TUf1ngNfRHxv

• @pkozlowski-opensource look in dev console log ngAfterViewInit local ref will be null

[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