Podemos extender la funcionalidad del componente Google Pay Button usando una directiva. En este caso, podemos tener una directiva deshabilitada que puede aceptar una propiedad de componente si es necesario deshabilitarla.

Cree una directiva gpayDisabled:

 import { Directive, ElementRef, Input } from '@angular/core'; import { interval } from 'rxjs'; @Directive({ selector: '[gpayDisabled]', }) export class GpayDisabledDirective { @Input() gpayDisabled = false; constructor(el: ElementRef) { const btnTimer = interval(200).subscribe(() => { let gPayButton = el.nativeElement.querySelector( '.gpay-card-info-container' ); if (gPayButton) { gPayButton.disabled = this.gpayDisabled; if (this.gpayDisabled) { gPayButton.style.opacity = 0.5; } btnTimer.unsubscribe(); } }); } }

Declare esto en la matriz de declaración del módulo, por ejemplo:

 declarations: [AppComponent, GpayDisabledDirective]

Luego, en la plantilla, podemos usar esta directiva así:

 <google-pay-button [gpayDisabled]="isGpayDisabled" environment="TEST" [buttonColor]="buttonColor" [buttonType]="buttonType" [buttonSizeMode]="isCustomSize ? 'fill' : 'static'" [paymentRequest]="paymentRequest" [style.width.px]="buttonWidth" [style.height.px]="buttonHeight" (loadpaymentdata)="onLoadPaymentData($event)" ></google-pay-button>

donde isGpayDisabled es una propiedad de componente, ya sea verdadera o falsa.

Demostración de Stackblitz .