Hello, everyone, and welcome back.
In this lesson, we're going to talk about a new structural directive in angular code.
This is the NGF directive that is useful for conditionally displaying or hiding from the user certain
parts of the page.
Let's give a concrete example for these very commonly used functionality, for example, here at the
level of our course.
We can see that every course that we are displaying here has an image.
And this is because here in our DB data file, all the courses belonging to this array have an icon
URL property that is being used here to display the image.
Now, imagine what would happen if one of these courses would not have here an icon URL property.
Let's remove the icon Eurail property from the first course and reload the application.
And now take a look at what happens.
We have here the browser symbol for a broken image and we have here an alternative text for the image.
The reason why we are getting displayed here, this text with a broken image is because we are defining
here an old property in our cursor component, and this contains the text being displayed.
Then these broken image that we see here, this is standard browser functionality.
The browser will display these whenever the source property is not correctly filled in.
What we would like to do in this situation is instead of displaying here this broken image, we would
prefer to hide the image completely and replace it with something else.
And this would happen depending on the presence of the icon.
Are property the expression that we pass to Engy if works in the following way.
If the expression is evaluated to true, then we are going to see that the elements onto which we are
applying NGF in this case, the image will still be present on the screen.
But if this expression evaluates to false instead, then the image is going to get hidden.
As we can see, that image is no longer present.
And if we expect here our application, we are going to see that not only the image is hidden, but
it was instead completely removed from the page.
So there is no hidden HTML element here that is still present on the page.
Even with Cyesis.
What happens here with NGF is that the content is completely removed from the DOM from the page itself.
Notice that we don't have to pass in the values, true or false, to NGF.
We can instead pass any JavaScript expression.
We can also pass here a reference to course that I can Eurail, which is a string and not a boolean,
and it can potentially be undefined.
But even though this is a string and not a boolean, the NGF structural directive is going to coerce
this value into a boolean.
So in this case, the value undefined of this first angular Cordie there, of course, is going to cost
the image to be hidden.
So this expression here in the case of this crosscourt is getting evaluated to false because a..
Neutral is undefined and for all other courses in the list because we have an icon Eurail property defined,
these NGF expression is going to be evaluated to true.
And so the image will be displayed on the card.
We don't have to pass only booleans or strings to engy.
If we could potentially pass an object and if the object is undefined, then it would be evaluated to
force any other object would be evaluated to true.
We can also pass in here a function call.
For example, we can create here a new method call image visible.
This method needs to be available here at the level of our components and from here we can return a
boolean to the template indicating if the image should be visible or not.
In this case, we would say that the image is visible if the course property is defined and if the course
property has an icon, you are l property also defined.
So as you can see, if we reload here the page, we can see that the same logic is still working as
expected.
Let's give another example of how to use engy if let's say that we have here in our least, of course
is an undefined object here at the beginning.
So by some reason this data here is not available, but it was accidentally passed on to our view.
Let's see what problem would this cause?
So now if we reload the application, we can see that it looks like everything is broken now.
And if we check here on the console we have here, the error message cannot reach property description
of undefined.
And here is the name of the component that is causing the issue.
The Coast Guard component, and we can see that it's these expression here course, the description
that is causing the problem to occur.
So the problem is that we are passing in the value end defined here to the input course.
And then this value is being accessed here.
Using the standard JavaScript dot notation for accessing properties, of course, is undefined.
So course the description is going to cause this effort here.
One way of avoiding this situation will be to use what we call the Elvis operator.
We simply add here at Questionmark evaluation of the property and then we're going to see that somehow
the results are slightly different.
We have here a different error message.
Now, the problem is here at the level of the long description property.
So we can fix that.
And now we have here a running program where we have here an initial care that is displaying incorrect
values.
But still, at least the program is not crashing.
And we have here our the day where the image is absent because the neutral properties are defined.
And here we have the other cards that are working correctly.
Now, what we would like to do here is to avoid the use of the Elvis operator in multiple places of
the template, because if the course is not available, then it really doesn't make sense to try to
display the course card.
So what we are going to do here is we are going to guard against this error scenario by using the NGF
directive.
Let's apply here NGF and let's simply pass it.
The course object.
If the object is already defined, then the card is going to be displayed.
On the other hand, if the object is not available, then due to the NGF directive, this whole section
here is going to get hidden and we will no longer see here this incorrect result.
Let's have a look at this in action after refreshing the application.
You can see that now that initial undefined Caird has been hidden and we are instead displaying directly
the second element of the array, the angular core Dave course as expected.
So what we can see by adding here NGF if at the level of the outer container of our component, we have
avoided the use here of the Elvis operator to avoid undefined errors and other commonly used feature
of NGF ezan else clause.
So let's say that we don't have here an image to display to the user, but we would like to show to
the user something else that just for example, a small amount of text that says that no image is available.
We can do that by using here and else close.
We simply have here and else.
And then we need to pass in here a reference to a template block that is going to contain our message.
So let's create here a template block.
We are going to do that using engie template and we are going to give this template block and name.
We are going to call it no image.
So we are using here the template reference hash syntax that we have seen before.
We're going to take here our message and we are going to based it here inside the template block.
Now we are going to take this template reference, no image, and we're going to have it here in our
else clause.
Let's now quickly see this logic in action.
We are going to refresh the application and we're going to see that we have here the no images available
message displayed on the screen, but only in the case of the first card where no image is available
in the remainder of the cards.
We are correctly displaying the image as expected.
And with this we have covered NGF, which is one of the most commonly used directive's in ANGULAR.
Next, we're going to talk about the engie class and engy style directives that we are going to be using
for styling our angular components.