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....

CodePudding user response：

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);
    });