Angular ng-if and ng-show combination

Question

Imagine some heavy content that might be rendered on a web page, such as a chart. Angular gives 2 options to toggle the visibility of said content.

ng-show

Answer 1

It was @new-dev 's answer that inspired my own combination idea to get a quite heavy component fast using a toggle button.

My original problem was that my page consists of ~20 components each taking ~1 second to load. Each being toggled by a button.

If using plain ng-if I would get instant page loading and 1 sec delay after a toggle press.

If using plain ng-show I would get instant toggle presses but 20 second page loading delay...

So, now I combine them with a ng-mouseenter control too. Like this.

This gave me superb performance in both chrome and IE. The time it takes for the user to actually click the button after entering the component is used for the DOM creation. And then the DOM nodes are quickly displayed once (if) the click arrives.

I also never set the ng-if expression to false again. Keeping the DOM cached if the user keeps toggle that section.

Update: The reason I do not have the ng-if and ng-show on the same div is that in IE it caused flickering. When mouseenter event arrived it would show the content and then hide it. In chrome it was ok to have it on the same div.