Bug(scope): Can not acccess view child of element wrapped inside transloco directive

[laradvil]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

Yes

Current behavior

    <div *transloco="let t; read: 'navbar.menu'">
      <a
        #serviceBtnView
        id="testBtn"
        routerLink="/services"
        routerLinkActive="text-primary-500 font-semibold">
        XX
        <i class="material-icons">
          {{ !serviceMenuOpened() ? "expand_more": "expand_less" }}
        </i>
      </a>
    </div>

@ViewChild('serviceBtnView', { static: true })
serviceBtn?: ElementRef<HTMLElement>;

ngAfterViewInit(): void {
  console.log(serviceBtn?.nativeElement); // undefined
  console.warn(document.querySelector("#testBtn") // undefined
}

Expected behavior

• should not be undefined
• If I was wrong, then how to access that element ?

After I remove transloco directive, it works just fine, all logs not undefined.

    <div>
      <a
        #serviceBtnView
        id="testBtn"
        routerLink="/services"
        routerLinkActive="text-primary-500 font-semibold">
        XX
        <i class="material-icons">
          {{ !serviceMenuOpened() ? "expand_more": "expand_less" }}
        </i>
      </a>
    </div>

    <ng-container>
      <a
        #serviceBtnView
        id="testBtn"
        routerLink="/services"
        routerLinkActive="text-primary-500 font-semibold">
        XX
        <i class="material-icons">
          {{ !serviceMenuOpened() ? "expand_more": "expand_less" }}
        </i>
      </a>
    </ng-container>

Both of these above works just fine

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

https://codesandbox.io/s/ngneat-transloco-forked-tk4nhg?file=/src/app/lazy-scope-alias/lazy-scope-alias.component.ts

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 
Angular: 
Node: 
Package Manager: 
OS:

Browser

Chrome

Additional context

No response

I would like to make a pull request for this bug

Yes 🚀

[mackelito]

I have the exact same problem.. If I move "<ng-container *transloco="let t">" to not wrap the element then it works..

[shaharkazaz]

Read the FAQ section in the docs.

Next time try to search the docs before opening an issue, here is the result of searching "viewChild":