Angular Tutorial - 12 - ngIf Directive

alright guys the next topic is structural directives structural directives are directives that let you add or remove HTML elements from the Dom and we are going to learn about the three common built in structural directives namely ng-if ng switch and ng for the first two directives that is ng if and ng-switch are used to conditionally render HTML elements whereas the ng for directive is used to render a list of HTML elements let's take a look at the ng-if directive in this video let's go back to visual studio code and you can see that I have created a new project called structural directives again I've added a test component and within the test component we have an h2 tag in the template that says code evolution and let's say we want to use the ng-if directive on this h2 tag so within the opening tag use an asterisk and then ng-if to this we need to assign a truth e or false e value let's begin with a straightforward true so now if we save this and take a look at the browser we can see code evolution and if I inspect the element you can see the h2 tag within this app test HTML tag now back in our code if I change true to false save this and take a look at the browser code evolution is not visible anymore and what you need to keep in mind is that the h2 element is removed from the Dom itself so in the elements panel you cannot identify h2 tag with an app test HTML element and this is different from setting the CSS display property to none in which case you will still be able to see the element in the Dom all right this is the basic usage of ng-if directive star ng-if assign a truthy or faulty value and that conditionally renders that particular HTML element however setting true or false on the right-hand side is of not much use so let's assign a property value instead I'm going to create a new property called display name and set it to true and to the directive I'm gonna assign display name now if you save this and take a look at the browser you can see code evolution and if I change display name to false code evolution is not displayed anymore so now by making use of a property we can add or remove the element in the Dom by toggling this display name between true and false and that can be done easily with button clicks or any other events but the bottom line is you have more control over rendering this particular h2 element now a common thing to have with an if block is an else block so let's take a look at an example to see how to implement an else block for the ng-if directive now I'm going to add a new h2 tag that says name is hidden so basically if display name is set to true I want code evolution to be displayed else I want name is hidden to be displayed and here's how you do it bear with me for a couple of seconds and I will explain what is going on first I'm going to wrap this else part with an angular specific HTML tag which is the engi template tag next I'm going to reference this ng template tag with a template reference variable let's call this else block now back in the ng F director I'm going to add a semicolon and then else followed by the ng template reference which is else block so let me explain how this works first it checks if display name is true if it is true the element to which the ng-if directive is attached will be rendered in the dawn if display name is false however angular checks if there is an else statement in our case we do now it checks which HTML element needs to be rendered in our case it is the else block and what is the else block it is a reference to this block of HTML the ng template tag is basically like a container for other elements that the ng-if directive can use to properly add or remove locks of HTML from the Dom so when execution flows to the else condition this block of code will be rendered in the screen so if we save this and take a look at the browser you can see that name is hidden which is the else block in our example is rendered in the browser alright next let's take a look at another syntax that angular provides for the ng-if directive now if you notice the directive is in line with the HTML block that needs to be conditionally rendered but with the alternate syntax you can have the directive in a separate tag so let me show you an example first I'll create the if block and the else block that has to be rendered and again we use the ng template tag now for the if block I've given a template reference variable of then block and for the else block I've given a reference variable else block let's add HTML to both these blocks code evolution for the if block hidden for the else block now we can add a new HTML tag that contains the ng-if directive so let's add a div tag and then the ng-if directive so star and she if to this we assign a value and this is going to be display name now after this we are going to add a semicolon followed by the keyword then and then then block semicolon again else else block and here's how you read it if display name is true then render then blog else render else block so right now our display name is set to false so the else block will be rendered so if we go back to the browser you can see that hidden is displayed and if I change display name to true and take a look at the browser again you can see code evolution is now displayed well that is how you use the ng-if directive in the next video let's take a look at the ng-switch directive

Channel: Codevolution

Views: 316,722

Rating: 4.9432912 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Structural Directives, Angular ngIf, ngIf, Angular 6, Angular 6 Tutorial

Id: nWst87nQmZQ

Length: 7min 9sec (429 seconds)

Published: Mon Dec 11 2017