I am trying to define a template variable on an element and use its hidden attribute to identify whether the element is actually present in the DOM and then display another element based on that. But if there is a structural directive, template variable does not seem to return a value.
<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
<a *wpHasAnyPermission="[{'something': true}]"
#resendEmailBtn>
Resend Welcome Email
</a>
</div>
<div class="pull-right">
<a #editAccountBtn>Edit Account Details</a>
</div>
rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}
Output is
rbtn:
ebtn: false
dline:
As you can see both the template variables on elements containing attributes ngIf and wpHasAnyPermission are not returning an values.
What I want to eventually do is to use resendEmailBtn and editAccountBtn in ngIf of hr to decide displaying the divider.
What is the best way to solve this ? I want to avoid dealing with component code. Try to solve this with in HTML.