Angular NgSwitch | Angular Tutorial For Beginners | Angular Training | Simplilearn

hey guys welcome back to another video by simply learn in today's session we're going to learn about the ng switch directive but before we begin if you haven't subscribed to our channel already make sure to hit the subscribe button and the bell icon to never miss an update so talking about ng switch director it is same as the switch statement in c programming it specifies an expression to match against now the expressions to match are generally provided within the ng switch case directives remember that every view that matches is rendered onto the view and if there are no matches a view with the ng switch default directive is rendered and the elements within the entry switch statement but outside of the ng switch case or ng switch default directive are preserved at the location to understand the working of this directive let's head to our text editor that is vs code so here i've created a project called switch and within which i've created a component called new component so here in the dot ts file first let's go ahead and create a day property so this day specifies the day of the week so let's say public day and this day is going to receive the day of the week so for that i'll have to make use of the date method so let's say new date dot get day all right so basically it returns the current day okay so let me just save this and back in my html file here i've just added a simple good morning message and now i'm going to make use of the div tag and say ng switch and i'm going to be making use of the day property so i'll just say equals day all right and now i'm going to make use of the ng switch case directive so let's say div ng switch case so one thing to remember is that when you're making use of the get day method here it returns a value that is a digit so it returns 0 for a sunday and 6 for a saturday so what we do is here it's going to be an integer so when i say ng switch case equals 0 i say let's just display a message saying today is sunday you deserve a break or something like that a simple message so i'm gonna add the switch case for the rest of the days of the week if it's a monday i'm gonna display a separate message and if it's a tuesday wednesday and the rest of the days of the week all right so lastly i'm going to have an ng switch default which says or something's wrong so i'll let you know how that works so for now let's just save this and see um look at the output so when you look at the browser it says hey good morning today is tuesday smash your goals so since today is tuesday the day i'm recording it it displays uh this message however i can change it that is i can customize it say for example i can just create another property here let's say public date two and let me just give uh the value five five is basically friday and here in my html i'll just change the property to day two and when i save this and let's have a look now it says today is friday thank god it's friday so this is how you can customize it all right so now to help you understand how the ng switch default works i have changed uh the property or day two and i've initialized it to seven now if you look at the html file we haven't provided any uh switch case for seven right so automatically it has to display the default message that is something is wrong so now let's save this and have a look at the browser you can see it says uh oh something's wrong so this is how ng switch works in angular all right so that is it for this session on angular ng switch if you have any doubts or queries let us know in the comment section below we'll get back to you immediately watch out for more videos from us on the angular series until then keep learning and stay tuned to simply hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 3,610

Keywords: simplilearn, angular ngswitch, angular tutorial for beginners, angular training, angular ng content, angular ng template, angular ngclass, angular ng content ng template, angular ng container, angular ngmodel, angular ng bootstrap, angular ng form, angular ng serve, what is angular, what is angular and why use it, what is angular and how it works, angular tutorial, getting started with angular, angular basic tutorial for beginners, simplicode

Id: eOc0RUh2pMI

Length: 4min 50sec (290 seconds)

Published: Tue Feb 02 2021