Can I set a variable in Angular template, and reuse it on other or child elements?

I have an Angular template, like this

<div *ngFor="let hero of heroes">
<p>Name: {{ getHeroAttribute(hero)?.name || '' }}</p>
<p>Skills: {{ getHeroAttribute(hero)?.skills || '' }}</p>
</div>


From the template above, getHeroAttribute() function will be called multiple times on render. Can I create an attribute on the element parent? So that I can get name and skills without multiple calls of getHeroAttribute()?

Let's assume that I must use this function to get its attribute, I cannot use hero.name or hero.skills to show the values.

Continue reading...