Rendering performance using *ngIf



I have segment bar that is showing/hiding some lists, it is faking tab-view functionality (mainly because those radlistview have swiping), but as we are using *ngIf to show hide, we have performance issues as those controls gets rendered at the moment they show visible, is there any better approach to do this? I tried playing with visibility parameter but can’t get it to work. The testing is on redmi 4A device that is pretty decent in cpu and memory.



Have you tried this new “elseBlock” way of handling showing and hiding elements in the XML? Might be useful

<ng-template #elseBlock>
      <Label textWrap="true" class="banner" text="Match your local temperature to a recipe using an Estimote beacon"></Label>
<Gradient *ngIf="temperature !== undefined; else elseBlock" class="gradientCard" direction="to bottom" [colors]="gradient">
        <Label class="temp" [text]="temperature + '°'"></Label>
        <Label [text]="recommendation" textWrap="true"></Label>


Hey Jen, hm, no I didn’t, will try!


We have a very similar implementation in our application as you have mentioned. Instead of using ngIf binding, which has to re-render the component, we leverage two-way binding on the visibility of the component.

<GridLayout [visibility]="selectedIndex === 0 ? 'visible' : 'collapse'"></GridLayout>

You’ll notice the render time is in-sync with your segmented item changes.

Note: This technically will have slightly higher overhead to render each of your lists, even if they aren’t visible to the view. Depending on the complexity of your application, this may not be an issue to be concerned of.


Hey Sean,
I started with your example as Jens requiere a little more work to be tested, and we see great performance improvements, the only issue I noted is that visibility is not working on ScrollView element even it is on the properties list, wrapping it in GridLayout solves the issue. Will try to test #elseBlock too just to see if it is better then playing with visibility.

thanks both!