Angular - *ngIf require click to "change" screen - ApplePayJS (?)

Question

I have a strange error when implementing Apple Pay using ApplePayJS.

Right after the payment is made, there is a function that connects to the backend. The backend sends a return that everything is fine with the payment.

Right after that I use a function that is responsible for changing the "panel" using ngIf.

Exactly the same method I use for another payment, when debugging the function everything goes correctly until the very end, i.e. changing the panel.

Unfortunately unlike with other payments, with ApplePayJS you need to "physically" click on any element that performs any action in the code. It can be even a simple checkbox. Then everything that was done in the code is also done in the UI.

I could show the code, but after a lot of testing this is independent of the final function code.

So to summarize:

Apple Pay button / payment activation => Confirmation of payment => Everything in the code when debugging executes as well as each console.log in each function shows the correct values => UI change happens only after interaction with any object in code like button / checkbox etc.

Answer 1

It may happen if the callback after Apple Pay is executed outside ngZone. If so, Angular would not check changes.

To ensure it will refresh the view, you can either :

• execute callback code inside a this.ngZone.run(() => {...})
• call this.changeDetectorRef.detectChanges() once your process is done

(ChangeDetectorRef or NgZone are injectables)