Bug(scope): Can not acccess view child of element wrapped inside transloco directive
laradvil opened this issue · comments
Is there an existing issue for this?
- 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.
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 🚀
I have the exact same problem.. If I move "<ng-container *transloco="let t">" to not wrap the element then it works..
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":