ngIf, ngSwitch and ngShow Directives In AngularJS

Introduction

AngularJS provides many built-in directives. All these directives provide special behavior to DOM elements. In this article we will cover ngIf, ngSwitch and ngShow directives.

ngIf

The ngIf directive recreates or removes the portion of the DOM based on the condition. Here condition is in form of expression. If the expression assign to this directive is set to false then the element is removed from the DOM tree otherwise AngularJS create the clone of the element and reinserted into the DOM. ngIf directive completely remove or reinsert the element in to the DOM. It does not change the visibility of element.

Using this directive, when the element is removed from the DOM the element scope is destroyed and a new scope is created while recreating. The scope created inherits from its parent scope. If we use ngModel directive to bind model data defined in the parent scope, any changes made to this model data in child scope will override the value of parent scope. ngIf directive creates element at the HTML compile time.

Syntax

<ANY ELEMENT ng-if=”expression">
</ANY ELEMENT>

Example

HTML

<h4>ngIf Example</h4>
<div ng-controller="HelloController">
Show Following Text:
<input type="checkbox" ng-model="show" ng-init="show=true" />
<div ng-if="show">
This is my ng-If directive test.
</div>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function ($scope) {
});

Output

ngIf

ngSwitch

This directive is used to swap DOM structure conditionally in our template based on a scope expression. ngSwitchWhen or ngSwitchDefault directives used to show and hide the element within ngSwitch directive. We can show or hide the element inside this directive and required to place a "when" attribute per element. The "when" attribute is used to inform the ngSwitch directive which element is to display based on expression, if the matching expression is found, the element is displayed else hide.

Example

HTML

<h4>ngSwitch Example</h4>
<div ng-controller="HelloController">
Employee Name:
<select ng-model="selection" ng-options="name for name in names"></select>
<div ng-switch on="selection">
<div ng-switch-when="Tejas">You have select "Tejas"</div>
<div ng-switch-when="Rakesh">You have select "Rakesh"</div>
<div ng-switch-when="Jignesh">You have select "Jignesh"</div>
<div ng-switch-default>Please select name</div>
</div>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function ($scope) {
$scope.names = ['Tejas', 'Jignesh', 'Rakesh'];
});

Output

ngSwitch

ngShow

The ngShow directive used to show/hide the given HTML element based on the expression supplied to ngShow attribute. This attribute adds ng-hide css class to hide the element. The ng-hide css class is predefined in AngularJS and it set the display style to "none" with "!important" flag.

Syntax

<ANY ELEMENT ng-show="expression">
...
</ANY ELEMENT>

Example

HTML

<h4>ngShow Example</h4>
<div ng-controller="HelloController">
Show Following Text:
<input type="checkbox" ng-model="show" ng-init="show=true" />
<div ng-show="show">
This is my ng-Show directive test.
</div>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function ($scope) {
});

Developer tool snapshot:

Output

ngShow

Reference

Directive

Summary

The ngIf, ngSwitch and ngShow are very important directives in AngularJS. This article will help you to learn all three.