How to use the Angular ngIf directive - Kevin Chisholm Video
https://blog.kevinchisholm.com
In this video, I'll explain how to use the Angular ngIf directive.
The Angular ngIf directive allows you to conditionally determine if a DOM element should exist or not. Here I have a div that contains some text... just some Latin text. And I'm using the ngIf directive to say “if content visible,” so if there's a content visible property, and it’s true, then we’re going to show all this content.
So, before we go too much further, let’s just see it working. So, if I load the page, I see I just have a simple button that says “show content.” When I click it, the content is visible. And I see a button that says “hide content.” And when I click that button, the content is no longer visible, and so forth, and back and forth. But also keep in mind the “show content” and “hide content” buttons are hiding and showing as well.
But there’s more than the hiding and showing going on here. If I inspect this DOM element, I can see that when I click the “hide content” that element… DOM element, no longer exists. So it doesn’t simply hide and show things. It actually creates and destroys elements.
Now watch what happens when I click the “show content” button. Then the content actually exists. But when I click the “hide content” button, the content actually is removed from the page. So ngIf determines if an element should be created or destroyed.
So looking back in the code, let’s look at the component. In the component, I have a property called content visible. It’s a Boolean, and it’s going to be either or true or false. So back in the template, I say for the content, “if content visible is true, then we should create this div element. And if it’s not true, we should destroy it.
Now let’s look at the buttons. The buttons have click event handlers set up on them. I don’t want to get into this, because it’s out of the scope of this video, but what we’re saying is, when this button is clicked, “content visible” is set to true, and then we hide the button, because the button should only exist if “content visible” is not true.
So, then, on this button, we’re saying the click event handler is going to set “content visible” to false, and we’re saying this button should only exist if “content visible” is true. So, these buttons are hiding and showing back and forth and being created and destroyed back and forth, and a big part of that is the ngIf directive. We’re saying this button should exist if “content visible” is true. This one should exist if “content visible” is false.
So, once again, in the page, we can see that when we show the content, the DOM element exists, and then when we hide the content, the DOM element is actually destroyed. And that’s the same thing for the buttons. The hide and show buttons are created and destroyed as well. You can see right down here, these buttons are being created and destroyed and that is all driven by the Angular ngIf directive.
If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development.
Thanks very much for watching.