Angular 2 (+Dart) inline conditionals: Is the second condition evaluated if the first is false? How to solve?

Issue

This is the code in my component.html (Angular Dart template):

<div *ngIf="selectedOffer!=null && !selectedOffer.isBotenOffer">...</div>

This is the exception I get:

EXCEPTION: NoSuchMethodError: The getter ‘isBotenOffer’ was called on
null. Receiver: null Tried calling: isBotenOffer

selectedOffer my be null sometimes. But why is the second statement evaluated if the first is false? And how can I around this best?

Angular will write this into the generated template file:

_NgIf_0_5.ngIf = ((ctx.selectedOffer != null) && !ctx.selectedOffer.isBotenOffer);

So it shouldn’t evaluate selectedOffer.isBotenOffer if selectedOffer is null. However, you may be hitting a bug that was just fixed in dart2js: https://github.com/dart-lang/sdk/commit/fe7baee84828e109a49920c2572f3917e5ff8ca5

You might hit this issue if you are setting selectedOffer in your component’s constructor, but doing an early return in the constructor.

Answered By – Harry Terkelsen