Hit enter after type your search item

4 demos of How to use ng-if directive in Angular

The ng-if directive in AngularJS

As using the ng-if directive, an expression is given. If the expression evaluates as false, the HTML element is removed from the DOM. If the expression is true, it will recreate the portion in DOM.

The ng-show and ng-hide directives can also be used to show or hide the specified HTML elements; however, the elements are shown or hidden by using the CSS display property. So, elements remain in the DOM while the ng-if will remove or recreate that HTML element.

The difference will be evident in scenarios like using the CSS pseudo-classes :first-child or :last-child, in which case the position of elements is changed after using the ng-if directive.

Syntax of using the Angular ng-if directive

This is how you may use the ng-if directive:

<div ng-if=”Boolean_expression”></div>

Where, the div can be replaced by other HTML elements like span, paragraph etc.

Read the following section to see ng-if in action where it is  used with the <div>, checkbox and other elements.

A demo of angular ngif directive

In this example, a checkbox is used with the ng-if directive. The initial value for the expression is set as false as the web page loads. As you click the checkbox, the expression will become true (as the checkbox is checked) and the span tag inside the div element will create. As you uncheck, the expression becomes false and span tag will remove:

ng-if

See online demo and code

The code:


 

A demo of creating / removing table by using ng-if

In this example of demonstrating the ng-if Angular directive, as you check the checkbox, the HTML table will display (recreate) and hide (remove) as you uncheck the checkbox. For this example, the initial value of the expression is kept true, so checkbox will be checked and table will display, have a look:

angular ng-if

See online demo and code

The code:


 

Get the complete code from the demo page.

An example of using ng-if with multiple conditions

In this example, multiple conditions are used in the ng-if directive. For that,  a div is created where ng-if is used like this:

<div class=”ngif_demo” ng-if=”enteredno>0 && enteredno<=5″>

You can see, the condition is set to check a number between 0 and 5. In the example, if you enter a number between 0 and 5, the div element will display. As you enter more or less than this number, the div will disappear or removed from the DOM. Have a look and try different numbers:

angular ng-if multiple

See online demo and code

The code:


 

You saw the “AND” operator is used to check the number is between 0 and 5.

A demo of setting true and false in controller

In this demo, the tabs are created by using Bootstrap’s tab component. Initially, four tabs are created, out of which only three are displayed as the demo page loads. The visibility is set by setting the expression of tabs in the Angular controller. Have a look:

angular ng-if controller

See online demo and code

The code:


 

You can see, the jQuery tab is not visible. The expression used for jQuery in ng-if is set false in controller:

$scope.jQuerytab = false;

This is the markup for jQuery tab:

<li><a ng-if=”jQuerytab” href=”https://www.jquery-az.com/jquery-tips/”>jQuery</a></li>

Similarly, other tabs expression are set as true, so those are visible.

This div height required for enabling the sticky sidebar