You all might be familiar with conditional statements which are if, if-else and switch in various programming languages like JavaScript, java, c++, etc.
I am here to tell how you can use the same conditional statements here in angular.
- If statement : To get the same result as if statement, angular provides a directive which is ng-if, it relies upon evaluating an expression as true or false. In the case of ng-if, if the expression evaluates false, it removes the element from the DOM entirely, if it’s true, the element gets recreated. Syntax is as follows:
<element ng-if="expression"></element>
In the example below I am usingng-if="time >=4 && time < 12"
to display div with message Good Morning! - If-else statement : Well angular does not provide a else directive so to achieve the result of if-else you can use ng-if one with positive expression and other with negation of expression.
Syntax is as follows:
<element ng-if="expression1"></element>
ng-if=”!expression1″></element>
<element
In the example below I am usingng-if="time >=4 && time < 12"
to display div with message Good Morning! and for else I am using not of above condition asng-if="!(time >=4 && time < 12)"
to display div with message So sad, You missed morning - Switch statement : Just as you use switch statement angular provides similar directive ng-switch. The ng-switch-when directive informs the parent ng-switch of which view to display when the expression is evaluated. When no matching expression is found on a ng-switch-when view, the ng-switch-default view is stamped out.
Syntax is as follows:
<element ng-switch="expression">
In the example below I am using switch statement to display 3 different div with their messages and in the default I am having a div with message You entered wrong number try to enter 1, 2 or 3.
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
Let me know your thoughts