how to bind *ngIf to *not* condition in template?

Question

I need to display a "Loading" panel in an html template until the results have been retrieved and bound to a component vm view model variable. So something like this:

<div *ngNotIf="vm.SearchResults">
Please Wait
</div>

Additionally, I'll need to ensure that vm exists before attempting to reference vm.SearchResults. What would be a good way to do this in ng2+?

Answer 1

<div *ngIf="!vm?.SearchResults">

The exclamation (or bang) symbol is a "not" operator.

The question mark is the "safe navigation" operator.

Or you can use an or (||)

<div *ngIf="!vm || !vm.SearchResults">