Based on that flag, a certain HTML element is added or removed from the DOM:

example.component.ts

<p>Show this all the time</p><p *ngIf="show"> Show this only if "show" is true</p>

Also, this condition does also apply to all child elements of the element that has the ngIf directive:

example.component.ts

<p>Show this all the time</p><div *ngIf="show"><p> Show this only if "show" is true</p></div>

NgIf is a directive

NgIf is a directive.

That means, that it can be added to any tag in your template. This includes regular HTML-tags like the "p"-tag shown above and even angular component selectors.

<another-component *ngIf="show"></another-component>

NgIf vs hidden

At first sight, the angular ngIf directive seems to just the same thing as binding to the HTML5 "hidden" attribute. So why do we need two ways to do the same thing?

<p [hidden]="!show"> Show this only if "show" is true</p>

Because they actually do two completely different things.

While the hidden attribute is literally hiding the selected part of the DOM, just like the CSS "display: none" property, the element still sit on the DOM. They are just invisible.

Angulars' ngIf directive, on the other hand, is completely removing the selected part from the DOM.The great advantage of that is, that this method is not interfering with any CSS-Style-sheets at all. It is simply removing anything.

Null Check with ngIf

Another very useful application of ngIf is when you need to check if a bound property is null before displaying some of its properties.For example, displaying a box with the users' information wouldn't make much sense if there is no information to display. Normally this would result in an empty box to be shown.

With the help of the ngIf directive, we can hide this box altogether, if the corresponding property is null or undefined anyway.

Avoiding "Cannot read property of undefined" errors

The ngIf directive can be very handy to prevent "Cannot read property of undefined" errors, as well.

Error possible

<p> {{user.name}}</p>

Maybe we are using sub-properties of the bound property. For example the name of the user. Accessing this property if user is undefined will result in an error.But by checking the user-property for null before using its properties will prevent this.

Better solution

<p *ngIf="user"> {{user.name}}</p>

Logical operators

The ngIf directive does also support logical operators, just like a regular JavaScript if statement would.

Logical NOT (!)

To invert the boolean value of a variable, we can use the not operator (!). The marked block is then shown when the variable is false.

<p *ngIf="!show"> Show this only if "show" is NOT true</p>

Logical AND (&&)

We can also chain two or more statements together using the AND (&&) operator. Again, just like in JavaScript, the statement is only true when all chained values are true, as well.

So the marked block is only shown when all values are true.For example a AND b have to be true:

<p *ngIf="a && b"> Show this only if a AND b are true</p>

Logical OR (||)

Just like the AND operator, the OR operator is used to chain one or more statements together. The difference with the OR operator is, that only one statement has to be true for the overall statement to be true, as well.

The marked block is shown, if either a or b is true:

<p *ngIf="a || b"> Show this only if a AND b are true</p>

Working with "else"

Just as we are used to from other programming languages, the angular ngFor directive does also allow us to declare an else-block.This block is shown if the statement defined in the main block happens to be false.

<div *ngIf="show; else notShow"><p> Show this only if "show" is true</p></div><ng-template #notShow><p> Show this only if "show" is not true</p></ng-template>

Notice, that the else block has to be an ng-template. The ng-template is a special element that is interpreted by angular and has no DOM counterpart. That means, that this tag is not included in the final HTML result, but only its content.

We have to use ng-content, because a normal div would be picked up by the browser and be rendered all the time.

Also, we have to give that block an ID (#notShow) so we can reference it in our ngIf directive as the "else"-block.

NgIf also has a "then"

In some rare cases, it might be useful to have the ngIf directive from its actual result-block. This would enable us to swap the result of the block out on the fly, by just referencing another ng-template.

For that reason, angulars' ngIf directive also has a then property.

<ng-template *ngIf="show;then showBlock; else notShowBlock"></ng-template><ng-template #showBlock><p> Show this only if "show" is true</p></ng-template><ng-template #notShowBlock><p> Show this only if "show" is not true</p></ng-template>

However, this is not the common and not the recommended way to do this, unless you really need that dynamic swapping.Personally, I have never used this before.

The hidden syntax of ngIf and ng-template

Last but not least, we are going to take a look under the hood.

It turns out, the sweet syntax with the * asterisk is just syntactic sugar.What this directive does internally, is convert its content to regular binding.

Also, it wraps its content with an additional ng-template.

For example, this template

<p *ngIf="show; else notShow"> Show this only if "show" is true</p><ng-template #notShow><p> Show this only if "show" is not true</p></ng-template>

is converted to this internally:

<ng-template [ngIf]="show" [ngIfElse]="notShow"><p> Show this only if "show" is true</p></ng-template><ng-template #notShow><p> Show this only if "show" is not true</p></ng-template>

You can use either of these methods. They have the same result. But notice, that you can save a few lines with the first method.

Personally, I only use the first method and have not seen the second one to be used anywhere.

Conclusion

In this tutorial we discovered, how we can use the power of the ngIf directive in our angular application.

I hope you liked this article. If you did, please share it with your friends!

Happy Coding!

Leave a comment

We save your email address, your name and your profile picture on our servers when you sing in. Read more in our Privacy Policy.

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy

Join the Newsletter

Never miss a post

Receive updates when a new post is published.

Stay in touch

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy