Angular 10 Tutorial #19 - ngIf in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners today we are going to learn a very very fundamental and important concept called ngf ngf is one of the three built-in structural directives that are available in angular this is part 19 of the angular 10 complete tutorial playlist make sure that you check it out i have planned around 100 tutorials for you in this particular series and the notes and the code and the github link are all available in the description box below make sure you check them out all right so so far in this particular series we have covered around 18 tutorials on your screen right now you see all the topics that i've covered in detail make sure that you check out all those things because i have covered in detail and i'm sure you will benefit to help learn and master angular all right so last few episodes if you see we are focusing on learning about directives uh we have learnt about the directives in angular today we are in the last episode we have learnt about structural directives today we are going to learn about ng if else and then in angular all right all right so let's get started so what is ng if ngf is a built in structural directive that can add or remove elements from the view right it's easy to recognize because it's a structural directive built in structural directive which means it will always have an asterisk symbol in front of it in the template now we can have that it's basically if you are coming from any programming language you would be you would have used you know zillion times how to write if else condition this is something similar ngf in angular right so you have a condition based on which it will evaluate that particular expression and it will either result into true or a false based on true or false you can show or hide an element respectively right similar to if states if else statement that you have written in any other programming language right we can also use ng if with else statement right so for example if you have two blocks of ah two blocks right say let us say div one and div two and for div 1 you want to show when the condition is true and div 2 when the condition is false right so you can also write that with ng if else condition by using template variable like how i have shown here else show message and then ng template you will use the template variable and pass that as a reference variable okay i'll show you this in hands-on just a bit so stay tuned just understand the theory first we'll do hands-on now similarly like how we have used ng if with else we can also use ng if with then an else statement right which means if the condition is true do a particular execute a particular block on then and if the condition is false then do a else condition block right so that's what you can flip and you can say do if this particular condition is true else execute the else block right so that's how it is so time to get some hands on exercise i hope you are excited before we get started i request you friends if you are liking the videos and the tutorial series please support me by liking uh comment share please don't forget to subscribe to my channel to keep supporting me thank you so much let's get into hands-on all righty uh so this is our application nothing fancy so far so let's let's start it ng serve all right so we are talking about ngf right so what we are going to do is first very very basic simple thing and the way i always do friends is i want you to learn with baby steps right so i'm here to help you with some nodes episode number 19 ng if right so first thing it always it will always have asterisk risk simple okay that means it's a it's a built in it's a built-in structural directive right so the reason friends i do this is because this is what will help you also for your interviews and when you want to explain it right that's why i do this notes please make make sure you understand ask me if you have any doubts all right so this is the two important things that you should know we can always have multiple use cases right so what are the use cases so we can have um ng if condition right we can have ng if else condition we can have ngf then else statement right so these are the three combinations that we can use ng if statement right so remember that the ngf condition right will evaluate the expression right and result result true or false right that's boolean right we can we can use our um logical operators like r that is double pipeline we can use and which is double ampersand right uh and we can also we can also use negation which is not right so these operators we can use inside ngf right so let's see this all of this in action and learn all about it so after this you will be able to master ngf right again if you have any doubts please drop them in the comment section i'll be very very happy to help you let's get started now so these are the things that we are going to do our hands on let's get started so first let's put in a div and since it's a ngf asterisk symbol equal to i'm saying show success message right doesn't make sense right just will write show success message right right let's say user added success fully right it so nothing fancy it's just a if condition success hyphen message if this is true show this block right it will give error here just like how it is giving it here because it doesn't know what is this right so let's take that value copy that and go to our app component dot ts right to the class define that variable and give a say value to it say false and this is not a good naming convention right so we should always use success underscore message and here we'll use success underscore message right so now we made it false right in the app component so now if you go to your application you will see okay why is it let's refresh okay so we don't see anything yes okay so now let's go to our appcomponent.ts and make it true it has hot reloaded user added successfully right now let's throw in a background color this is a bootstrap utility class okay so maybe bootstrap class is not enabled let me quickly check that for you uh i thought we added it okay then we changed it to i think we changed it some time back to material design but that's okay that's not the big that's not the major piece of learning today the major piece is ng so i'm going to throw in here and i'm going to say background color okay all righty so now let's see so it says user added successfully right so that is the first div block ng if based on this condition whether it is true or false it will show or it will hide now see this will hide because now it is false so make it true and again it comes back right so that is ng if right so that is ngf condition this is done the next condition is ng if with else statement let's see that i am now saying if this condition is not true right if this condition is not true then what you should do comma put put semicolon here after success message variable and then or let me show you one other use case first with or condition right so success underscore flag right either of this is true show this block right this is our condition so i am just showing you one more variable of it so here i'll put one more it's a flag equal to true now see it is showing because both are true both in any one if and if you make it false it will still be green because the condition we have written is if either this should be true or this should be true if i make it and and say both should be true now it won't show up because this variable is false here make it true and it comes up right now this was about using with logical operator similarly you can say if not success message right it shows because if not true right so here let's see now it won't show because this is true right now let's make it false now it will show up because the condition is negation if it is not true which is in this case it's not true right that's why it's showing up now let's see with the else statement so if success message else give a say error underscore message and here we will have to use a directive called built-in directive ng template and here we'll given template reference variable that means we'll put hash followed by the same name what you are giving in else block and here we will write user was not added so see now it says user was not added here it says user was added because if this is true let me delete this so that it doesn't confuse you if it's see it says user not added in the else block so this is not true else it's going to error message block which is user was not added color say right okay leave that that's not worry okay so user was not added now similarly this is about if and else condition now i am going to add one more condition here we will say if this condition is true i didn't show you the true right let me show you that let me make this true okay so now it's back to user added successfully right if true show this block else show this block now let's modify this again if this is true then you show updated underscore message else show error message now will add one more block and say this is updated message user was updated so you see user was updated now it won't come inside this if this is true it will go to this block else it will go to error message now this will not be executed even if you remove it doesn't matter it will always come here when this condition is true right so that is various combinations that we have seen n g f with logical operators right we saw r and not right and you will write with double ampersand or you will write with double pipeline right so ng if else that's what we have seen ng if followed by else this will be a template reference variable so make sure you add ng template followed by hash followed by the message same same name here similarly you can write ng if then and then use uh the same block that you want to refer all right so that is all you should know about ng if if you know this much that means you're good enough to start with other structural directives which is ng4 that's what i'm going to cover it in the next episode thank you so much for joining i hope you are finding these tutorials useful as always i welcome your doubts queries if you're stuck somewhere just drop me a comment i'll try and help you thank you so much for joining keep watching for this channel for more tutorials

Channel: ARC Tutorials

Views: 8,357

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 ngIf tutorial

Id: ePPtk76N1KU

Length: 14min 37sec (877 seconds)

Published: Thu Nov 12 2020