12.05.2024

So ngf and ng4 are what is known as. structural directives in angular and the. reason for that is we can use them to. control how a component displays certain. things when it's rendered to in the. browser so let's take a look at some. examples we'll first look at NG if so NG. if is basically like an if statement in. your template so if we wanted to render. a button on the page for example maybe. it has some text inside it if we wanted. to render that only under certain. conditions we can use ngf to display it. or remove it depending on the value that. we supply to the directive so to use. ngif we use an asteris and then type in. ngif as the directive and then in the. quotes we need to provide some kind of. expression that resolves to either true. or false so for example if I set the. value directly in ngf to false the.

Button disappears and if we set it back. to true the button should reappear now. it's worth noting that this actually. completely removes the button from the. document it's not actually hiding it so. if we inspect the button in the document. as it is you can see that button is. appearing there in the dev tools but if. we then set this to false to actually. remove the button you can see in the. document structure that button Element. no longer exists this is in contrast to. using an attribute like hidden on the. button which will keep the actual button. element in the document but obviously. won't display it to the user so here you. can see the buttons still exists in the. document but we just actually can't see. it so the advantage of using something. like ngf as we saw in the previous. lesson is that we can actually rather.

Than using hardcoded values within the. template control this from the component. so if we had a variable on our class. called show button for. example that doesn't exist at the moment. so let's go and create that in the app. component and if we set it to True from. here obviously the button appears and we. can switch it off and hide it by setting. the show button property to false and of. course in a real project what you would. be doing is changing this. programmatically based on the result of. some function call or some state that. the app is in and the value that you. pass to ngf doesn't have to be directly. be a Boolean of true or false it could. be some expression that's calculated. within the template so if we had. something like number of items on the. actual component going into the app. component template we can then write an.

Expression in here to say. number of items needs to be bigger than. five for the button to be displayed. which is true in this case so the button. appears so it's very common to do. something like this if you for example. only want to show something when there. is a number of items in the array and. it's not empty so talking about arrays. that is something that we can work with. using the ng4 directive so let's first. of all go back to the app component to. create an array of items on our. component code so let's say we had a. property called data on our app. component and I'm just going to assign. it an array of values which is. essentially an array of objects which. are describing some fruits so we can. access this data array directly in our. template as you would expect with the. normal array so to access the first item.

In the fruits array we could uh use. template interpolation to grab the data. array and the first item in there as you. would with a normal JavaScript array and. then access the name property of that to. display it on the page so you can see. here we're getting the name of Apple. which corresponds to the first item in. the array so we could go through and. copy this and access each item in the. array individually uh but that's. obviously not very manageable and. scalable because we don't know how the. array is going to be presented. especially if this data is fetched from. an API and we don't know the actual. length of it so what we need to use here. is the ng4 directive and the ng4. directive will take an array and it will. Loop through it and give us a templating. facil facilities to actually output each. of the items in turn so let's have a.

Look at what that might look like for this example so let's say we're going to have a div element for each of the items in the array so we're going to use ng4 much in the same way that we did with NG if and we need to declare the local variable that is going to represent each item in the array so we'll say let fruit of data and if we save that nothing will actually happen because we need to provide a template for each of the fruits in the uh array that data that we've got so when we Loop through this ng4 each variable that we've declared here which we've called fruit will represent each line in the data array so we should be able to just say fruit.

Name and then when we refresh the page. you can see that all of the names of the. items in the array all of the fruits are. being displayed as a list so of course. we can access all the other properties. in the fruit object as well uh such as. we had color and taste so we can put. those out as well say color and taste. and this works exactly the same way as a. normal JavaScript for Loop or for each. Loop basically getting each of the items. in the array in turn and then we're. providing a template for that to display. within the component so there's one. other thing which is useful to do with. ng4 and that is to access the index. position of each item in the array and. we can do that by saying let I equals. index making sure we've got the. semicolon to separate this first. statement here and then what we'll have.

With each iteration of the loop is that. I will be equal to the position uh of. the item in the array so for example. just before we output all of the fruit. details we can say I and then maybe put. a CO on there to separate it so you can. see in the output now we've got all of. the different items in the array but. also we've got the actual index position. of where they live as well which can be. useful if you want to to do certain. things like actually only displaying. certain items based on their index. position so we could just wrap this in. one more div. here and then use an NG if statement to. write some kind of expression to say if. the index position modulus 2 is equal to. zero so only giving us the items at the. even positions just move this eye down. here as well to move that so now we've. created an expression based on the index.

position of the item and we're only. conditionally showing the ones that are. at the even positions so just a silly. example really but hopefully you can see. how you can combine ng4 and ngf to. create some powerful uh conditional. templating so when you're displaying. data like this using ng4 you might want. to conditionally filter some of the data. items that are in that array and a good. way to approach that is to use angular. pipes and if you're interested in. learning more about angular pipes then. you should check out the next video. where we're going to explain exactly. what they are and how to use them