Skip to main content

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 the element is reinsert when the expression become true.
  • Similarly any event attached after the compilation will be lost when ng-if expression become false.
  • The css property, added class or any event attached will be there incase of ng-show or ng-hide directive.
  • When the element with ngIf directive is reinserted, it recreates a child scope which inherits from the parents scope. We should not redeclare primitive type within the ngIf element as it hide the parent primitive value. It cause two different values, one in parent and one in child scope. In such situation we should use object property within the element having ngIf directive. We can the object property without redeclaring it within the child scope as ng-model respond when the identity of the object changes, not when the property of object.
I have created and simple app to see how ng-if and ng-show directive responds:

 

Labels:

Comments

Post a Comment

Popular posts from this blog

Automatic Slashing the Date Input using Angularjs

We define a directive that will automatically slash the input field as user typein the date. The directive have following capabiltiy: The directive will append slash '/' when input field has 2 or 5 characters. The input will accept only 10 characters (dd/mm/yyyy). Validity of date provide will not be checked. When the backspace is pressed it will remove the last two character if last character is slash. Otherwise it will remove last character from the input field. The input will not accept characters other than numbers (0 to 9). Let's jump into the code. We will use bootstrap for awesome look: HTML Code: <div class="container" ng-app="myApp" ng-controller="myAppCtrl"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <form class="form-horizontal"> <h4 class="bg-primary">Auto Slashing Date using Angularjs Directive</h4> <div class=...
5 comments
Read more

Code Syntax Highlighting on Blogger using Prismjs

Prismjs is developed by Lea Verou. It is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.Today, we will see how to use the prismjs on blogger to highlight our codes. It very easy and step by step process to follow: Goto to this link and get the personalized links for prismjs or simply copy the links given below: <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-coy.min.css" rel="stylesheet"></link> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script> Goto Theme > Edit HTML and paste the links before the closing </head> section as shown below: Default prism.min.js file contain the functionality to highlight the code for only HTML, CSS and JS code. If you wish to use other language to highlight, you have to paste the link for that langu...
18 comments
Read more

Conversion between Date String and Timestamp using Angularjs Directive

Let me ask you one question. Can a veiwValue and modelValue have same value into a different format? The answer is YES . Here we will see how it can be possible. We will see it through a simple example that converts date string (viewValue) into timestamp (modelValue). We will use a text box to enter a date string (dd/mm/yyyy) and convert it into timestamp that will be stored into model value. The trick is that we will use $parsers to convert the date string into the timestamp and $formatters to change the timestamp stored in modelValue to date string that will be shown on text input. Let's see the codes first: HTML Code: <h4>Date to Timestamp</h4> <div class="form-group"> <label for="date1" class="col-sm-3 control-label">Date1 VeiwValue:</label> <div class="col-sm-3"> <input type="text" id="date1" class="form-control" name="date1" ng-model="ob...
1 comment
Read more