Angular 10 Tutorial #21 - ngSwitch in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for beginners in today's episode we are going to learn about ng switch statement what is ng switch how do we use it what are the use cases that you will use in real time applications we are going to learn all about it in today's episode this is part 21 of the angular 10 complete tutorial playlist make sure you check it out the playlist link is in the description box below so far we have covered 20 episodes and if on your screen right now you're seeing all the topics that i've covered in detail with live coding and examples make sure that you check it out so that you have continuity in your learning if you have any doubts on the previous episodes or any topics just drop them in the comments section i will try to help you today we are focusing on learning about ng switch so what is ng switch ng switch is a built-in directive it you can you can identify it because it starts within the brackets right uh in the square brackets you will write ng switch if you are coming from any other programming familiar background uh like any programming language like um c c plus plus java etc you would see something called switch statements right so switch statements allows us to that it takes a parameter and can do multiple checks right so you can have multiple variations and say if it belongs to this expression if it belongs to this expression do this etcetera a good argument that lot of people put is why should we use switch and not use if else right so let's say i give you an option that let's say there are 10 values right and you want to check that a certain condition is met that your value matches to any of those 10 conditions so it doesn't really make sense that you write if else if else you false equals 10 times right i hope you agree with me on that so ng switch will help you easily write such kind of use cases where you have multiple values through which so you are trying to compare and find a value which is matching to your expression that expression can be that is what we call them as switch cases right so there are three main important elements of ng switch one is ng switch ng switch case and the other is ng switch default let's see this how to use that this is a little bit of code syntax for your reference so you have ng switch that's what you write it in the square bracket when you pass the expression and then you pass the switch cases which means if it matches this expression 1 2 3 4 5 and number and then finally you can also have something like default if nothing matches do this right so that's the pseudo code for your reference now let's jump into hands-on and do some practical examples before we do that please friends i request you to please support me by liking the video please do subscribe to my channel also please i look forward to your feedback and comments thank you so much in advance let's get started with um some practical hands-on example so first we have our application up and running so it's a simple one we learned ng for in the last episode so make sure you check it out let me put it before i'll say learning and g switch okay all right so ng switch like i said it's used for comparison of values right so how do you write the syntax you can write something like this ng switch look at the carefully the up the cam cases right don't make a spelling mistake because most probably some of the junior developers will end up doing such mistakes which is not really okay so if i do something like this you see it will give error right because it does not know so it should be ng switch and then i will say expression right so what is an expression it that you want to resolve now in this case let's say i'm going to say superhero right i'm saying there has to be there is a superhero so let's go ahead and put it in our component here i'm going to say superhero equal to um it's it's odd right that sometimes um women are much better than us um but we still call it superheroes um so i'm going to rename it and say um super power right and then we'll say we'll pass a value we'll say wonder woman right and then let's take super power and put it in the here so now i'm saying whenever check for the value of super power that's what we are telling it here next i'm saying take ng switch case equal to now this is extremely important friends make sure that you follow this com correctly because i have heard so many developers from my development team complain about this because they just make this mistake every time here if you see it's a string right this is a string right and lot of people what developers do is that they just put it like this right sorry the woman's superpowers ok now see now this is giving error right now let's see why so the reason being that it's 6 string so it has to be the quotes right so now you see now you don't have an error if you put it like this it is thinking that you are trying to compare to a property and that would give you error here right so this has to be kept in a string like this then only it will work right so now i'm checking that the value of super power should be equal to wonder woman if it is true do this now see i'm going to put some variations and here i'm going to say superman right so this is spiderman right this is spider-man this is he-man right this is superman you get the point right so now see so what we are saying here is come this is an expression superpower come and check if it is values matching to this display display display wherever the values are matching so when you go to application it will so it will show that display wonder woman super powers that means it has it now knows that there is a value which is equal to wonder woman right now let's change it right let's make it superman now you see it says display superman super powers right so now i'm going to make it spiderman so see just by changing the values your expressions are changing right so really you're not writing if else and making it messy code right it's simple straightforward syntax and trust me it's absolutely powerful when you're dealing with such activities right now some of you may ask hey um why only strings right why not do something with say um category category right so let's say you're looping something and you have some category right so then you can say category is clothing mobiles right so you can have different combinations like that let's say if you are if you are building a ecommerce application you might have something like check for the product category if its categories clothing mobiles etcetera right or you can say tax right numbers now now let us deal with numbers right so here now we can say if tax is greater than 100 right if tax is less than 50 right so this really cannot be done right because expressions you cannot do right so what we can do instead is something like this if tax is say 30 or if say tax is say 50 right now let's define tax and say tax is equal to 10 right so now what we are saying we are saying tax is equal to 10 so here i am saying if it is 30 if it is 50 so it is not showing because the values are not matching so now i am going to say tax equal to 10 so now it says display tax is 10 display tax is 30 right so see now this is integer number that's why i am not putting it in quotes but if it is a string you have to put it there right so this is one use cases where you have done string and numbers right now you will say hey let's say the values does not match what should we do right so for that we'll use something called ng switch k switch default default means simple if no value matches super power is learning right so if none of this matches display this right so let's see that working so here it says display spiderman super powers because in the component it is matching spiderman so now i am here i am making angular and now i the expected output is super power is in learning so see similarly if there is no text matching i'd add one more entry and call it here defaults which is default and you don't have to pass any value because by default if none of this my values matches it will take switch case default right default tax is 50 for you right so now it is tax is 10 let's change it to something 20. so now it default tax is 50 right so that's how ng switch can be used in your applications in real time to kind of write beautiful code at the same time it's crisp right there is so many validations checking it's doing but the code is really crisp the code is really beautiful the code is not complicated it handles all the use cases if value matches display if else if it doesn't match any of these values show the default as simple as that right i hope this is clear to you i hope it's interesting and you're finding it you're finding it interesting to learn in the next episode we will continue learning about ng style very very important very very critical most of the time you'll end up using ng style in your applications for sure stay tuned for that please drop me any questions or queries that you have on ng switch i'll be happy to help you not only on ng switch i welcome any questions that you have on angular 10 series let's learn together let's grow together if you like my work please consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you so much

Channel: ARC Tutorials

Views: 6,160

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular ngswitch tutorial

Id: 4d0PgMBBrnE

Length: 12min 7sec (727 seconds)

Published: Sun Nov 15 2020