Angular - 2.22- Using ngIf to exit data conditionally

In the application example we have built so far, we have not used directives other than components that are directives. But we have not used any other integrated directive. Now, let’s say that one of the things we want to do is just show that this server was created here. It is not necessary to have this text. No server has been created. So what would be nice is if we could post that message conditionally. And for that, we need help. We can use a directive delivered with Angular, the ngIf directive.

Now it works like an if statement and to be precise, it works like this, in our service component here, where we output the server creation status. I’m going to comment on that so that we can always refer to that code, but now I’m going to add a new paragraph where I just say that the server was created. The serverName is therefore bind to the serverName.

Now, with that in place, it’s always going to work, but now you see every time you press a button how we change the serverName, which isn’t really what I want. Instead, I want it posted as soon as you click that button here. So what I can do is add a directive here. And as I said, directives are usually added using an attribute selector.

And pretty much all the built-in directives use this ngIf selector. And then ngIf is added by adding a star. So it’s important, ngIf star, the star is necessary because ngIf is a structural directive, which means it changes the structure of our DOM. They either add that or they don’t. So that’s just additional information for Angular. The directive itself is just ngIf, but the star is needed. Without it, it will not work properly.

So ngIf, and then we can set our condition here in quotation marks. For ngIf, this must be some expression, returning true or false, deciding whether it should be added or not. So here it would make sense to add a new property that we call serverCreated and set to false. And we set it to true once the button is clicked. So here we create a server, which is triggered when the button is clicked. Here we put serverCreated equal to true.

Now, with this, we can go back to our model and simply link ngIf to serverCreated. And again, it can also call a method that returns true or false or directly perform the check in quotation marks, anything that returns true or false.

Now, with this, if we save what you see, there is no text. But if I name testserver 2 and click on the button, now the text is added here. And the interesting thing is that if I reload the app and we inspect our DOM here, you see here is our appServerComponent. Above that is the button. But if I click on that button, a new item is entered here, the paragraph. And here you see a kind of hook that Angular created to find out where he has to go in. But the important thing is that it’s really added to or removed from the DOM. It’s not there all the time. It’s not hidden, it’s just not there, which is super important to understand. So here’s ngIf. Again, the beginning indicates that this is a structural directive that really changes the DOM as you’ve just seen.