Angular Variable change not detecting html

October 18, 2022

I’m trying to update the variable in the output function and its’ updating in ts file only, not HTML, I’m adding code below.

TS FILE

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {
  success: boolean = false;

  constructor(private _cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this._cdr.detectChanges();
  }

  validatePayment(response) {
    this._cdr.detectChanges()
    this.success = true;
    console.log('updatePaymentOrder', this.success);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log("Changes detected");
    if(changes.success) {
      console.log('changes.success', changes.success.currentValue);
    }
  }
  
}

HTML CODE

<p>{{success}}</p>
<app-razorpay (paymentResponse)="validatePayment($event)"></app-razorpay>

razorpay.ts

declare var Razorpay: any;

@Component({
  selector: 'app-razorpay',
  template: ''
})
export class RazorpayComponent implements OnInit {
  @Output() paymentResponse = new EventEmitter<any>();
  
  constructor() { }

  ngOnInit(): void {
    this.showRazorPayWidget()
  }

  showRazorPayWidget() {
    var options = {
      key: 'KEY',
      amount: "10000",
      currency: "INR",
      name: "COMPANY",
      handler: function (response: any) {
        this.paymentResponse.emit(response);
      }.bind(this),
    };
    var rzp1 = new Razorpay(options);
    rzp1.on("payment.failed", (response: any) => {
      console.log('error')
    });
    rzp1.open();
  }

}

output:

false

expected output:

the success value should change.

success value is changing in ts file, but it’s not changing in html file….

>Solution :

I just tried to reproduce and It is not reproducible on my end. Can you add more code to it?

stackblitz playground

You can wrap this in ngZone Api

 handler: function (response: any) {
          console.log(this._ngZone.isInAngularZone)
          this._ngZone.run(() => { this.paymentResponse.emit(response); });
      }.bind(this),

Alternate way, You can add more listener to razorpay success/cancel/error like this instead of doing it from handler

    rzp1.on("payment.success", (response: any) => {
      console.log('success', response)
      this.paymentResponse.emit(response);
    });
    
    rzp1.on("payment.cancel", (response: any) => {
      console.log('cancel', response)
      this.paymentResponse.emit(response);
    });