What is the difference between ng-if and ng-show ng-hide

Question

I m trying to understand the difference between ng-if and ng-show ng-hide  but they look the same to me   Is there a difference that I should keep in mind choosing to use one or the other

User · Answer

ng-if if false will remove elements from DOM. This means that all your events, directives attached to those elements will be lost. For example, ng-click to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and again when it is true it is recreated.
ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles (.ng-hide) to hide/show elements .This way your events, directives that were attached to children will not be lost.
ng-if creates a child scope while ng-show/ng-hide does not.

User · Answer

Maybe an interesting point to make  is the difference between priorities between both    As far as I can tell  the ng-if directive has one of the highest  if not the highest  priority of all Angular directives  Which means  it will run FIRST before all other  lower prioritised  directives  The fact that it runs FIRST  means that effectively  the element is removed before any inner directives are processed  Or at least  that s what I make of it   I observerd and used this in the UI I m building for my current customer  The entire UI is quite heavily packed  and it had ng-show and ng-hide all over it  Not to go into too much detail  but I built a generic component  which could be managed using JSON config  so I had to do some switching inside the template  There is an ng-repeat present  and inside the ng-repeat  a table is shown  which has a lot of ng-shows  ng-hides and even ng-switches present  They wanted to show at least 50 repeats in the list  which would result in more or less 1500-2000 directives to be resolved  I checked the code  and the Java backend   custom JS on the front would take about 150ms to process the data  and then Angular would chew some 2-3 seconds on it  before displaying  The customer did not complain  but I was appalled  -     In my search  I stumbled across the ng-if directive  Now  maybe it s best to point out that at the point of conceiving this UI  there was no ng-if available   Because the ng-show and ng-hide had functions in them  which returned booleans  I could easily replace them all with ng-if  By doing so  all inner directives seemed to be no longer evaluated  That meant that I dropped back to about a third of all directives being evaluated  and thus  the UI speeded up to about 500ms - 1 sec loading time   I have no way to determine exact seconds    Do note  the fact that the directives are not evaluated  is an educated guess about what is happening underneath   So  in my opinion  if you need the element to be present on the page  ie  for checking the element  or whatever   but simply be hidden  use ng-show ng-hide  In all other cases  use ng-if

User · Answer

The ng-if directive removes the content from the page and ng-show ng-hide uses the CSS display property to hide content   This is useful in case you want to use  first-child and  last-child pseudo selectors to style

User · Answer

ngIf makes a manipulation on the DOM by removing or recreating the element    Whereas ngShow applies a css rules to hide show things    For most of the cases  not always   I would summarize this as  if you need a one time check to show hide things  use ng-if  if you need to show hide things based on the user actions on the screen  like checked a checkbox then show textbox  unchecked then hide textbox etc     then use ng-show

User · Answer

ngIf  The ngIf directive removes or recreates a portion of the DOM tree based on an expression  If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM  otherwise a clone of the element is reinserted into the DOM    lt  -- when  scope myValue is truthy  element is restored  -- gt   lt div ng-if  1  gt  lt  div gt    lt  -- when  scope myValue is falsy  element is removed  -- gt   lt div ng-if  0  gt  lt  div gt    When an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored  The scope created within ngIf inherits from its parent scope using prototypal inheritance   If ngModel is used within ngIf to bind to a JavaScript primitive defined in the parent scope  any modifications made to the variable within the child scope will not affect the value in the parent scope  e g    lt input type  text  ng-model  data  gt   lt div ng-if  true  gt       lt input type  text  ng-model  data  gt   lt  div gt            To get around this situation and update the model in the parent scope from inside the child scope  use an object    lt input type  text  ng-model  data input  gt   lt div ng-if  true  gt       lt input type  text  ng-model  data input  gt   lt  div gt    Or   parent variable to reference the parent scope object    lt input type  text  ng-model  data  gt   lt div ng-if  true  gt       lt input type  text  ng-model   parent data  gt   lt  div gt    ngShow  The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute  The element is shown or hidden by removing or adding the ng-hide CSS class onto the element  The  ng-hide CSS class is predefined in AngularJS and sets the display style to none  using an  important flag     lt  -- when  scope myValue is truthy  element is visible  -- gt   lt div ng-show  1  gt  lt  div gt    lt  -- when  scope myValue is falsy  element is hidden  -- gt   lt div ng-show  0  class  ng-hide  gt  lt  div gt    When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute on the element causing it to become hidden  When true  the ng-hide CSS class is removed from the element causing the element not to appear hidden

User · Answer

Gajus Kuizinas and  CodeHater are correct  Here i am just giving an example  While we are working with ng-if  if the assigned value is false then the whole html elements will be removed from DOM  and if  assigned value is true  then the html elements will be visible on the DOM  And the scope will be different compared to the parent scope  But in case of ng-show  it wil just show and hide the elements based on the assigned value  But it always stays in the DOM  Only the visibility changes as per  the assigned value   http   plnkr co edit 3G0V9ivUzzc8kpLb1OQn p preview  Hope this example will help you in understanding the scopes  Try giving false values to ng-show and ng-if and check the DOM in console  Try entering the values in the input boxes and observe the difference    lt  DOCTYPE html gt                               Hello Plunker    lt input type  text  ng-model  data  gt   lt div ng-show  true  gt       lt br  gt ng-show true     lt br  gt  lt input type  text  ng-model  data  gt   lt  div gt   lt div ng-if  true  gt       lt br  gt ng-if true     lt br  gt  lt input type  text  ng-model  data  gt   lt  div gt     data

User · Answer

Fact  that ng-if directive  unlike ng-show  creates its own scope  leads to interesting practical difference    x000D   x000D  angular module  app       controller  ctrl   function  scope   x000D     scope delete   function array  item   x000D      array splice array indexOf item   1   x000D      x000D     x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  app  ng-controller  ctrl  gt  x000D      lt h4 gt ng-if  lt  h4 gt  x000D      lt ul ng-init  arr1    1 2 3   gt  x000D         lt li ng-repeat  x in arr1  gt  x000D            show   x000D           lt button ng-if   show  ng-click  show  show  gt Delete   show   lt  button gt  x000D           lt button ng-if  show  ng-click  delete arr1  x   gt Yes   show   lt  button gt  x000D           lt button ng-if  show  ng-click  show  show  gt No lt  button gt  x000D         lt  li gt  x000D      lt  ul gt  x000D      x000D      lt h4 gt ng-show  lt  h4 gt  x000D      lt ul ng-init  arr2    1 2 3   gt  x000D         lt li ng-repeat  x in arr2  gt  x000D            show   x000D           lt button ng-show   show  ng-click  show  show  gt Delete   show   lt  button gt  x000D           lt button ng-show  show  ng-click  delete arr2  x   gt Yes   show   lt  button gt  x000D           lt button ng-show  show  ng-click  show  show  gt No lt  button gt  x000D         lt  li gt  x000D      lt  ul gt  x000D      x000D      lt h4 gt ng-if with  parent  lt  h4 gt  x000D       lt ul ng-init  arr3    1 2 3   gt  x000D         lt li ng-repeat  item in arr3  gt  x000D            show   x000D           lt button ng-if   show  ng-click   parent show   parent show  gt Delete    parent show   lt  button gt  x000D           lt button ng-if  show  ng-click  delete arr3  x   gt Yes    parent show   lt  button gt  x000D           lt button ng-if  show  ng-click   parent show   parent show  gt No lt  button gt  x000D         lt  li gt  x000D      lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    At first list  on-click event  show variable  from innner own scope  is changed  but ng-if is watching on another variable from outer scope with same name  so solution not works  At case of ng-show we have the only one show variable  that is why it works  To fix first attempt  we should reference to show from parent outer scope via  parent show

User · Answer

EdSpencer is correct  If you have a lot of elements and you use ng-if to only instantiate the relevant ones  you are saving resources   CodeHater is also somewhat correct  if you are going to remove and show an element very often  hiding it instead of removing it could improve performance   The main use case I find for ng-if is that it allows me to cleanly validate and eliminte an element if the contents is illegal  For instance I could reference to a null image name variable and that will throw an error but if I ng-if and check if it s null  it s all good  If I did an ng-show  the error would still fire

User · Answer

To note  a thing that happened to me now  ng-show does hide the content via css  yes  but it resulted in strange glitches in div s supposed to be buttons    I had a card with two buttons on the bottom and depending on the actual state one is exchanged with an third  example edit button with new entry  Using ng-show false to hide the left one present first in the file  it happened that the following button ended up with the right border outside of the card  ng-if fixes that by not including the code at all   Just checked here if there are some hidden surprises using ng-if instead of ng-show

User · Answer

One important thing to note about ng-if and ng-show is that when using form controls it is better to use ng-if because it completely removes the element from the dom    This difference is important because if you create an input field with required  true  and then set ng-show  false  to hide it  Chrome will throw the following error when the user tries to submit the form   An invalid form control with name    is not focusable    The reason being the input field is present and it is required but since it is hidden Chrome cannot focus on it  This can literally break your code as this error halts script execution  So be careful

User · Answer

One interesting difference in ng-if and ng-show is   SECURITY  DOM elements present in ng-if block will not be rendered in case of its value as false  where as in case of ng-show  the user can open your Inspect Element Window and set its value to TRUE   And with a whoop  whole contents that was meant to be hidden gets displayed  which is a security breach

User · Answer

ng-show and ng-hide work in opposite way  But the difference between ng-hide or ng-show with ng-if is if  we use ng-if then element will created in the dom but with ng-hide ng-show element will be hidden completely   ng-show true ng-hide false  Element will be displayed  ng-show false ng-hide true  element will be hidden  ng-if  true element will be created  ng-if  false element will be created in the dom

[angularjs] What is the difference between ng-if and ng-show/ng-hide

Examples related to angularjs

Examples related to angularjs-ng-show

Examples related to angularjs-ng-if