4

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+?

Rohan Fating
  • 2,135
  • 15
  • 24
user8570495
  • 1,645
  • 5
  • 19
  • 29

1 Answers1

14
<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">
DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • do you know if there is a technical name for the question mark used in the context of your example?: vm?.SearchResults also, do you know if there is any type of equivalent to this shortcut in typescript? for example, the following forEach loop would only execute if an authors property existed on qsParams: qsParams.authors?.forEach( x => this.vm.CurrentSelectedAuthors.push(x[1]) ); – user8570495 Sep 07 '17 at 15:53
  • Yes, as I mentioned above ... it is called the "safe navigation operator". I'll quote it to draw it out more. – DeborahK Sep 07 '17 at 17:31
  • For the other part of your question, see this: https://stackoverflow.com/questions/45441086/does-typescript-have-a-null-conditional-operator – DeborahK Sep 07 '17 at 17:38
  • shouldn't it be `
    `
     – Saksham Jul 17 '18 at 02:49