Conditional display of elements/data using Angular Js Directives.

Today we would learn frequently used Angular JS directives.


Problem:- How to achieve conditional construct in Angular js?

Love Nature


Solution:- We would achieve it by using built in directives of Angular JS.

1. ng-Switch:-We can control the conditional display of data.
It is similar to Switch-Case in JavaScript.
JavaScript syntax:-
Switch(expression) {

   Case  n:
Code
Break;
Case n1:
Code
Break;
Default:
Default code


Angular JS syntax:-
Lets have corresponding code for above flow using directives:-
ng-switch on = expression 

   ng-switch-when = n
Code
ng-switch-when = n
Code
ng-switch-default
Code


We also need to use ng-switch-when & ng-switch-default directives same as Case and Default in Javascript


Example:-

<div ng-app>
EnterColor:
<input type = "text" ng-model="Color"/>
<div ng-switch on = "Color">
<span ng-switch-when="red" style="color:{{Color}}"> I am very RED
</span>
<span ng-switch-when="green" style="color:{{Color}}"> I am very GREEN
</span>
<span ng-switch-default style="color:{{Color}}"> I am default
</span>
</div>

</div>


Working Code

2. ng-If:- Used to remove/recreate the DOM element based on the expression.

Syntax:- ng-if=”Conditional-Expression“

Note:-when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.

Example:-

<div ng-app>
Check for Red Color:
<input type = "checkbox" ng-model="Color"/>
<div ng-if = "Color" style="width:50px;height:50px;background-color:red;">
</div>
<div ng-if = "!Color" style="width:50px;height:50px;background-color:green;">
</div>

</div>


ng-if example code



Working Code

3. ng-Show/ng-Hide:-
Used to show/hide the DOM element based on the expression.

Note: – Unlike ng-if, it is not deleting and recreating the element from DOM but simply changing the display CSS of the element.

Syntax:-ng-Hide=”expression“

How it works: – 

  • All it uses is Class =”ng-hide” and this class have CSS property of “display:none !important”.
  • !important so that this property have the maximum weight and cannot be overridden.
  • When expression is true then .ng-hide CSS is added causing element to be hidden and vice-verse.
Note: – For ng-Show we have ng-hide class added on “False” condition and removed when condition is “true” (it is reverse case as of  ng-Hide)

Example:-
<div ng-app>
Show Me:
<input type = "checkbox" ng-model="Color"/>
<div ng-show = "Color" style="width:50px;height:50px;background-color:red;">
</div>
Hide Me:
<input type = "checkbox" ng-model="hideColor"/>
<div ng-hide = "hideColor" style="width:50px;height:50px;background-color:green;">
</div>

</div>

ng-show Example



  • We can check the ng-hide class, using the inspect element.

At launch of code 

ng-hide class is applied


Check the “Show Me” checkbox


ng-hide class is removed


ufthelp

Leave a Reply

Your email address will not be published. Required fields are marked *