Skip to main content

Posts

Showing posts with the label ngIf

Dive into ngIf directive and ngShow directive with example

ngIf and ngShow directives are used very frequently in Angular apps. Here will the difference between these two through an example. Firstly, let's see the main difference between these two as in angular docs: ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather then changing its visibility via display css property. The main points are as follows: ngShow directive uses css display property to show and hide the element in DOM. It does't remove the element from the DOM. It just set class="ng-hide" to hide the element and removes the ng-hide class to show the element. ngIf directive remove and reinsert the element based on the expression provided in ng-if directive. The inserted element has the state which was initialized at the time of compilation. If we change any css property of the element or set any class, that css property and class will be lost if the ng-if expression becomes false and...