{"id":757,"date":"2016-05-13T18:53:54","date_gmt":"2016-05-13T18:53:54","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=757"},"modified":"2026-03-30T00:13:01","modified_gmt":"2026-03-30T05:43:01","slug":"example-angularjs-switch-case","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/","title":{"rendered":"Example of Switch Case in AngularJS using ng-switch Directive"},"content":{"rendered":"

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<\/strong>. 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.<\/p>\n

In the below example I am showing how to use AngularJS<\/a> 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<\/strong> 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<\/strong>.<\/p>\n

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.<\/p>\n

Switch Case in AngularJS Example<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>How to use Switch Case in AngularJS?<\/title>\r\n<!--AngularJS CDN Link-->\r\n<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.8\/angular.min.js"><\/script>\r\n<script type="text\/javascript">\r\n(function(angular) {\r\nangular.module('modSwitch', [])\r\n.controller('ControllerSwitch', ['$scope', function($scope) {\r\n$scope.options = ['Blog', 'Business', 'Fashion', 'Career', 'Education', 'Others'];\r\n$scope.selection = $scope.options[0];\r\n}]);\r\n})(window.angular);\r\n<\/script>\r\n<\/head>\r\n<body ng-app="modSwitch">\r\n<div ng-controller="ControllerSwitch">\r\n<select ng-model="selection" ng-options="item for item in options">\r\n<\/select>\r\n<hr\/>\r\n<div ng-switch on="selection">\r\n<div ng-switch-when="Blog">Blog is a Business.<\/div>\r\n<div ng-switch-when="Business">Business is a Busy Game.<\/div>\r\n<div ng-switch-when="Fashion">Fashion updates Everyday.<\/div>\r\n<div ng-switch-when="Career">Career is Like a Ladder.<\/div>\r\n<div ng-switch-when="Education">Education Never Ends.<\/div>\r\n<div ng-switch-default>This is the Default value for Switch Case.<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Alternatives to *ngSwitch<\/h3>\n
While `*ngSwitch` is useful, there are alternative approaches:<\/p>\n
`ngIf` with Else<\/strong> \u2013 For simple binary conditions, `ngIf` may be more straightforward.
\nCustom Directive<\/strong> \u2013 For complex scenarios, a custom structural directive can provide more flexibility.
\nComponent Binding<\/strong> \u2013 Sometimes, passing inputs to a single component is cleaner than switching between multiple templates.<\/p>\n
Conclusion<\/h3>\n
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\u2019s toolkit. Always ensure proper case handling and consider alternatives when dealing with highly complex scenarios.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":2,"featured_media":8153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[37181,37182,37183],"class_list":["post-757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-angularjs-with-examples","tag-example-of-switch-case","tag-switch-case-in-angularjs","tag-using-ng-switch-directive"],"yoast_head":"\nExample of Switch Case in AngularJS using ng-switch Directive<\/title>\n<meta name=\"description\" content=\"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Example of Switch Case in AngularJS using ng-switch Directive\" \/>\n<meta property=\"og:description\" content=\"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/panda.biswabhusan\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-13T18:53:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T05:43:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"477\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Biswabhusan Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Biswabhusan Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\"},\"author\":{\"name\":\"Biswabhusan Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b\"},\"headline\":\"Example of Switch Case in AngularJS using ng-switch Directive\",\"datePublished\":\"2016-05-13T18:53:54+00:00\",\"dateModified\":\"2026-03-30T05:43:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\"},\"wordCount\":625,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png\",\"keywords\":[\"Example of Switch Case\",\"Switch Case in AngularJS\",\"Using ng-switch Directive\"],\"articleSection\":[\"AngularJS with Examples\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\",\"url\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\",\"name\":\"Example of Switch Case in AngularJS using ng-switch Directive\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png\",\"datePublished\":\"2016-05-13T18:53:54+00:00\",\"dateModified\":\"2026-03-30T05:43:01+00:00\",\"description\":\"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png\",\"width\":\"750\",\"height\":\"477\",\"caption\":\"Example of Switch Case in AngularJS using ng-switch Directive\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Example of Switch Case in AngularJS using ng-switch Directive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b\",\"name\":\"Biswabhusan Panda\",\"description\":\"Biswabhusan is the founder & CEO of JHARAPHULA. Over the last 3 years, he & his team has proved the way to turn blogging into a lucrative career choice. A blog scientist by mind and a passionate blogger by heart. His blog, JHARAPHULA is a platform of various interactive information.\",\"sameAs\":[\"https:\/\/jharaphula.com\",\"https:\/\/www.facebook.com\/panda.biswabhusan\"],\"url\":\"https:\/\/jharaphula.com\/author\/biswabhusan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Example of Switch Case in AngularJS using ng-switch Directive","description":"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/","og_locale":"en_US","og_type":"article","og_title":"Example of Switch Case in AngularJS using ng-switch Directive","og_description":"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.","og_url":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_author":"https:\/\/www.facebook.com\/panda.biswabhusan","article_published_time":"2016-05-13T18:53:54+00:00","article_modified_time":"2026-03-30T05:43:01+00:00","og_image":[{"width":750,"height":477,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png","type":"image\/png"}],"author":"Biswabhusan Panda","twitter_misc":{"Written by":"Biswabhusan Panda","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/"},"author":{"name":"Biswabhusan Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b"},"headline":"Example of Switch Case in AngularJS using ng-switch Directive","datePublished":"2016-05-13T18:53:54+00:00","dateModified":"2026-03-30T05:43:01+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/"},"wordCount":625,"commentCount":0,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png","keywords":["Example of Switch Case","Switch Case in AngularJS","Using ng-switch Directive"],"articleSection":["AngularJS with Examples"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/example-angularjs-switch-case\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/","url":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/","name":"Example of Switch Case in AngularJS using ng-switch Directive","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png","datePublished":"2016-05-13T18:53:54+00:00","dateModified":"2026-03-30T05:43:01+00:00","description":"Modern Compilers compiles faster to Switch case rather if and else. For beginners of AngularJS here we are with an easy example of Switch Case in AngularJS.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/example-angularjs-switch-case\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/Switch-Case-in-AngularJS.png","width":"750","height":"477","caption":"Example of Switch Case in AngularJS using ng-switch Directive"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/example-angularjs-switch-case\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"Example of Switch Case in AngularJS using ng-switch Directive"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b","name":"Biswabhusan Panda","description":"Biswabhusan is the founder & CEO of JHARAPHULA. Over the last 3 years, he & his team has proved the way to turn blogging into a lucrative career choice. A blog scientist by mind and a passionate blogger by heart. His blog, JHARAPHULA is a platform of various interactive information.","sameAs":["https:\/\/jharaphula.com","https:\/\/www.facebook.com\/panda.biswabhusan"],"url":"https:\/\/jharaphula.com\/author\/biswabhusan\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=757"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/757\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/8153"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}