You've probably run into the following situation: You have an element that you want to put on the page, but you only want it to display if it meets a certain condition in your Javascript. For example, you have a button that you only want to appear if a user is logged in.
How would we do that in Javascript?
It would probably look something like this:
- Write out your if statement
- If it's true, create your element
- Then assign it an innerHTML with all the relevant info you want
- Append it to an existing element
This seems fine, but we have several problems. First of all, it's a lot of code. Any chance we can get away with writing less code, the better.
Secondly, you're writing out an entire HTML element inside your javascript file. This means you don't get the same benefit within your IDE that you would if you were writing inside an HTML file. Notice how when you create a tag, it makes the ending tags for you? How everything is neatly colored? Don't expect to see any of that while you're writing your markup in a JS file. Emmet? Hah! You can get around this part by editing your settings files, but the moral of the story? You're probably going to make a typo. And that > that you forgot isn't going to show up in your HTML file.
Finally, since we're using innerHTML, everything is unsanitized. This means when you have to throw data in that HTML that includes input from the user (and you will), you run the risk of opening up your site to cross-site scripting attacks (XSS) unless you are very careful with your data.
Your code probably looks like this.
if (loggedInUser) {
const elementAppendee = document.getElementById('userBox');
const newElement = document.createElement('p');
newElement.innerHTML = `Welcome ${loggedInUser.name}`
elementAppendee.appendChild(newElement);
}
Can I do this without writing any Javascript?
Glad you asked.
Doin' it in Angular: *ngIf
Doing the same thing in angular will require use of the *ngIf. Just put *ngIf="" inside any element you want to show up conditionally. For example:
In this case, the p tag will only show up if loggedInUser is equal to true.
In the above example, the link displaying 'Next Page' would only show up if the value of the entries variable is greater than 5.
What about functions? Can I use the result of a function to be my condition?
You sure can. Check out this example:
Now this link to admin.html will only show up if the result of the method areYouAnAdmin returns a true value. This is useful when you don't want the conditions to be explicitly available to the user.
One last thing to note, the condition of whether or not to display applies to not only the element you apply *ngIf to, but all of it's child elements as well. So in the following code:
<div *ngIf="myVar">
<p> ... </p>
<p> ... </p>
</div>
Not only does the div not show up if the value of myVar resolves to false, but the p tags inside will not show up as well.
Summary
Using ngIf now brings several benefits that offset the problems we had earlier using Javascript.
- All our markup is in the HTML file. We won't have to go into another file to see where our potential markup is. It's all in one place.
- We can use the interpolation brackets to bring in content that is automatically sanitized for is like this: {{ variable }}
- Our code is now both easier to read, and easier to debug
- If the condition resolves to be false, the HTML is completely hidden and is not shown in the inspector, so we can hide what we want from the user. (There are ways around this that we will get to later)
And we did all this with no javascript whatsoever.