As a good programmer you need to know the advantages of using Switch Case in place of If and Else. Modern Programming languages compiles switch case more faster than if & else. During application development using switch case we can achieve better performance for Conditional statements. It’s no matter if you are using if & else for 4 to 5 conditional statements. But in-case you are handling more then 4 to 5 Conditional statements to Compare values in such case prefer to use Switch Case in AngularJS in place of if and else.
In the below example I am showing how to use AngularJS Switch Case. Look at the Codes below. Here inside the Controller I declared an options object to the $Scope. Options array contains six items. In html body I have a dropdownlist which shows me the list of values from this options array. Depending upon the selected value from dropdownlist I am showing a div with appropriate message. In the primary div of switch cases messages I am using ng-switch on=”selection” to instruct on which values switch case will occur. Here “selection” is my ng-model. Which is declared in my select control. To check each case from options array I am using ng-switch-when & for default value like ‘Others’ from options array I am using ng-switch-default to show the default massage.
To run the below example copy the codes to a Notepad file. Save it as a html File. Then open the HTML file with internet Connectivity. This demo app contains CDN links. Without Internet this will not work.
Switch Case in AngularJS Example
<!DOCTYPE html>
<html>
<head>
<title>How to use Switch Case in AngularJS?</title>
<!--AngularJS CDN Link-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript">
(function(angular) {
angular.module('modSwitch', [])
.controller('ControllerSwitch', ['$scope', function($scope) {
$scope.options = ['Blog', 'Business', 'Fashion', 'Career', 'Education', 'Others'];
$scope.selection = $scope.options[0];
}]);
})(window.angular);
</script>
</head>
<body ng-app="modSwitch">
<div ng-controller="ControllerSwitch">
<select ng-model="selection" ng-options="item for item in options">
</select>
<hr/>
<div ng-switch on="selection">
<div ng-switch-when="Blog">Blog is a Business.</div>
<div ng-switch-when="Business">Business is a Busy Game.</div>
<div ng-switch-when="Fashion">Fashion updates Everyday.</div>
<div ng-switch-when="Career">Career is Like a Ladder.</div>
<div ng-switch-when="Education">Education Never Ends.</div>
<div ng-switch-default>This is the Default value for Switch Case.</div>
</div>
</div>
</body>
</html>
Alternatives to *ngSwitch
While `*ngSwitch` is useful, there are alternative approaches:
`ngIf` with Else – For simple binary conditions, `ngIf` may be more straightforward.
Custom Directive – For complex scenarios, a custom structural directive can provide more flexibility.
Component Binding – Sometimes, passing inputs to a single component is cleaner than switching between multiple templates.
Conclusion
The `ngSwitch` directive in Angular provides a clean and efficient way to handle conditional rendering based on different values. By understanding its syntax, use cases, and best practices, developers can create more dynamic and maintainable applications. Whether displaying role-based content, switching between views, or handling enums, `ngSwitch` is a powerful tool in the Angular developer’s toolkit. Always ensure proper case handling and consider alternatives when dealing with highly complex scenarios.