Angular 9 Tutorial For Beginners #12 - NgIf

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn about ng if-else statements in angular and ng if is very similar to if conditions you might have written in any other programming language it's similar not same but the follows the same approach and method we learn all about that in this particular tutorial my name is shredder I have over 10 years of experience as a full-stack developer I bring knowledge on modern front-end technologies on angular react and also on backend technologies I am here to share my knowledge with you and also to learn from you all during the course of the tutorials if you have any doubts any queries please drop them in the comment section below I will be happy to help you for free again I am putting in a lot of hard work in compiling these tutorials so please like this video and please don't forget to subscribe to my channel to keep supporting and encouraging me so far in the tutorial series we have covered around 10 tutorials right from starting with basic angular introduction to modules to angular CLI decorators components we have covered directives in last episode and in today's episode we will learn about ng if statements let's get started so in this episode we will focus on three main aspects the first is how to write ng if statement the second is how to write ng if with L statement and we'll also learn how to write ng if with then an else statement let's get started so as usual we are building a project here so and in every tutorial I am making some notes so I will make some notes for you here also so let's get started the first thing we'll do is we'll start with ng F what is ng if ng F is a built in structural direct which is used to add or remove elements based on an expression condition ng-if is a built-in structural directive which means that it starts with Asterix symbols also the expression evaluates to either true or false just like any other if-else condition you would have written in any other programming language now when we put an if-else condition it will have two conditions if the condition is true what has to be done if the condition is false what needs to happen right so it's true or false and how do we write it will write with asterik ng if equal to condition or expression right so let's get see that in action now so first we are learning about ng if now in ng if we always starts with asterik ng I capital and then F so let's learn how to write ng F statement now first now remember this is a built-in directive so it will start with asterik ng if now open a component wherever you want to implement the condition and then let's start by writing a simple div for now right and let's call it inside if statement right so this is the if statement it will always show up in your screen let's see that first so you see we have a if statement right because it is always visible since it's a div now I'm going to add a condition and I'm going to say that if the if the message or if an expression is variable is true we will show it else we will not show it so for that we will write space astrick ng followed by capital I small F a lot of times people make mistake here by writing small I make sure you don't make that mistake now here we will give the expression name now the name of the expression is simple so here let's call it and say show message so here I'm declaring a expression right now we need to initialize this so copy this and then go to the component or TS file and let's put that here and say show message equal to true right nothing fancy just a variable which has a name and we are giving a value as show message equal to true so now when you come to HTML this will become true since ng-if is becoming true it will show this statement right we are going to change it a little bit and just make it show message right so now we have a variable whose value is set to true that's why we are showing this particular div block let's see that in action first so it it is displaying show message correctly because we have used the variable and we are tying it up as true now let's go and change it and make it false so now when we make this variable as falls in the div it will not be visible the div should not be visible right because we have made it false let's see that in action so you see now that is not displayed because we have made the expression as false so which is how ng-if works right so whenever there is an expression which resolves to true it will show whenever there is a expression which resolves to false it will not show that right this is a simple offence condition you can add complex ones you can have some calculations and you can still have it not being shown or shown based on your expression content now let's see the next part cheese ng-if with L statement now let's say you have some statement where you want to write if else condition right so how do you write f else condition in angular we will learn that now so simple so first let's go ahead we will use the same syntax of ng F and we will use something called template reference variables that is what that is where else condition comes into picture what is a template variable reference whenever we need to use a template variable reference we need to use ng template that's the important piece remember guys you cannot use it with div you have to use it with ng template now the syntax for writing is ng if show value that is the name of the expression else show the error message write whatever you want to show the else statement let's see that in action let's make some notes first so this is default or say built-in built-in structural director starts with asterisk symbol write expressions resolved to true or false right same thing applies to ng if with L statement so here we will use template reference variable and we will always use ng template directive so that's what we will use to write the else statement now let's see that in action now here in the use case we have a ng if condition that if the condition is true we will show the message now let's write a condition by writing if it is false show else message right so we will write to write it inside the double quotes that is another mistake lot of people do show else message right so here we are saying if it is true if the show message is true then show this particular block else show else message right now since this is this is a template reference variable we need to define the template so we will write ng template this is how we will write and then we will give the name as the same name that you have given in the else now see here important thing is here you need to write the same name that you have given in L statement also you need to add hash in front of it hash will tell that it's a template reference variable it's very very important so make sure you are following it correctly now inside this I am writing show else message right now in our component we have made it false right the show message is set to false so ideally the output should now be show else message let's see that you see here show else message right so this is showing up because our variable is going into else mode now let's make it true right now when you go you should see again back to show message so this is how if-else conditions are written in angular we have ng template to write the else part and ng if to check if it is true then write the this particular condition that is displayed in the div if it is else then write it inside the ng template that is all about the ng if with else condition now the next one ng if with then an else here we can write now we have learned how to write offence condition but there can be two blocks that we need like for example if an expression is true some some block needs to be executed if it is false some other block needs to be executed how do we do that let's learn it now so similar to ng if-else condition we will again use a template reference variable to create a block and then call that block whenever the condition is true right let's first make some notes and then jump into writing code so the next is ng ng if with with then an else statement here we will use again template reference variable right for both else and then condition right so let's see that in action so I'm going to copy this as it is here and give a different name so here I will say if this expression is true then called show show let's say then message else show message show else message right so check this expression if it is true execute this block else execute this block now you give the same name here and you can remove this here got it so this is simple we have a simple thing which is getting resolving to true and false expression and if it is true execute a particular block else execute something else so now let's see we have show message we have show then message and finally we have show else message right now let's see the output show else message right because this is set to false show message is true so okay so change this value here just to clear now you will see that it should show then message you see show then message because it is going inside the then block because the condition is true else it will go to show else message now let's make it false right now see it will show show else message so this is how angular's ng if else and then condition works all right so that was all about ng if else and then statement I hope you are following I hope you are enjoying the series I hope you are liking the video give a thumbs up to this video share it please don't forget to subscribe to my channel so that you don't miss out on other videos in the next episode we will learn about ng switch which is where we will learn about how to put multi conditions into our code right thank you so much for joining in this episode see you in the next episode

Channel: ARC Tutorials

Views: 16,238

Keywords: angular 9 tutorial for beginners, angular 9 tutorials, angular ngif, angular ngif else, angular ngif tutorial, angular 9 ngif statement, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, arc tutorials angular 8, arc tutorials angular 9, angular tutorials

Id: t9wJ_c5qO5I

Length: 14min 40sec (880 seconds)

Published: Fri May 22 2020