We always hear about prefer ‘ng-if’ than ‘ng-show’ but why??? What is the reason behind it? Then where we need to use ng-show and not ng-if? So today, I will be explaining these things in brief.
How they work …
First we will understand how ‘ng-if’ and ‘ng-show’ works.
In case of ng-if, control will gets rendered on to the page only when ‘if’ condition gets satisfied. Otherwise it will not get rendered on to the page.
Where as in case of ng-show all controls will get rendered on the page but only those controls are visible who have satisfied the condition for ng-show.
In normal scenarios where we want to load controls conditionally, it is better to use ng-if because the controls which are required only those will get rendered on the page. This will even make page a bit lighter as well and performance will get improved too.
Even ng-if makes developer’s life easier especially validating the controls (like textboxes) using form validations (e.g. required field validation). The reason is in this scenario text box which are visible on the page will get validated because rest of the controls are not even rendered on the page. But if we use ng-show the controls which are hidden will also fire the validation because though they are not visible, they are already loaded on the page. So ng-show will complicate the scenario for validation.
Now where we can use ng-show??? Consider a scenario where you want to maintain the state of controls (tough they are hidden because when ever you choose the same option again you want those controls back in the same state as they were in previous).
In this scenario we can use ng-show because all controls are already rendered on the page (just they may not visible). So these all controls will maintain there state always where as ng-if if will not allow controls to get rendered so controls will not be able to maintain there states. So in such scenario one can go for using ng-show instead of ng-if.
That’s all my friends!