Angular – passing checkbox value from from a regular component to a model component

My app has a payment form that accepts the four main types of credit cards, plus a fifth called Direct Express that is somehow related to Mastercard. The app needs to be able to distinguish between a Direct Express card and a regular Mastercard. The payment form has a checkbox that appears once the card number is entered and which asks if the card is a Direct Express card (it doesn’t appear for Visa etc, only Mastercard numbers). A method in one of the components will return either MASTERCARD or DIRECTEXPRESSMASTERCARD, depending on whether the box is checked. I’m having trouble passing the checked value to that method.

Five files are involved in this, and they appear in the tree as follows: the ‘app’ folder has a folder ‘one-time-payment’ that has a folder ‘model’. The ‘model’ folder has a model component, ‘onetimepayment-form-group.ts’. The ‘one-time-payment’ folder also has a folder called ‘payment-method’ which has a folder ‘credit-card’. In that folder is ‘credit-card.component.html’ and ‘credit-card.component.ts’. In the ‘one-time-payment’ folder, on the same level as the ‘model’ folder and the ‘payment-method’ folder are two files, ‘one-time-payment.component.html’ and ‘one-time-payment.component.ts’.

The relevant code for ‘credit-card.component.html’ is as follows:

<div class="row first checkBoxPannel" *ngIf="directExpressCheck">
  <div class="offset-md-3 col-md-9" >
      <input type="checkbox" (change)="isDirectExpress($event)" id="isDECheckbox">
      <label for="isDECheckbox" class="control-label" style="color:red;padding-left:.5rem;">Check here if this card is DirectExpress</label>
  </div>
</div>

The relevant code for ‘credit-card.component.ts’ is as follows:

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.component.html',
  styleUrls: ['./credit-card.component.css'],
  providers: [OnetimepaymentFormGroup]
})

@Output()
  isDirectExpressChecked = new EventEmitter<boolean>();

isDirectExpress(event) {
  console.log(event.target.checked);    // WHEN BOX IS CHECKED CONSOLE.LOG SHOWS TRUE
  if(event.target.checked) {
    this.cardTypes = ['direct-express'];
    this.isDirectExpressChecked.emit(true);
  } else {
    this.cardTypes = ['mastercard'];
    this.isDirectExpressChecked.emit(false);
  }
}

The relevant code for ‘one-time-payment.component.html’ is as follows:

<app-credit-card [(paymentForm)]="paymentForm" (isDirectExpressChecked)="isDirectExpressChecked($event)" *ngIf="isCreditCardPayment"></app-credit-card>

The relevant code for ‘one-time-payment.component.ts’ is as follows:

isDirectExpressCard:boolean;

isDirectExpressChecked(event) {
  this.isDirectExpressCard = event.target.checked;
  console.log("one-time-payment.component.ts isDirectExpressChecked this.isDirectExpressCard = " + this.isDirectExpressCard);  // THIS LINE DOES NOT EXECUTE
}

buildCreditCardOTPRequest(clientId,tokenId) {
  return {
    electronicPayment : {
      cardType : OnetimepaymentFormGroup.getCreditCardType(this.cardNumber.value, this.isDirectExpressCard)[0],
    }
  }
}

Finally, the relevant code for ‘onetimepayment-form-group.ts’ is as follows:

public static getCreditCardType(cardNumber,isDirectExpressChecked?) {
  console.log("onetimepayment-form-group getCreditCardType isDirectExpressChecked = " + isDirectExpressChecked);
  if(OnetimepaymentFormGroup.MASTER_REGEX.test(cardNumber)){
    if(!isDirectExpressChecked) { 
      return ['MASTERCARD'];
  } else {
    return ['DIRECTEXPRESSMASTERCARD'];
  } 
}

I thought that using an EventEmitter with the @Output decorator would help me transfer the value, but the console.log in the getCreditCardType method shows that isDirectExpressChecked is undefined, so the value isn’t passing. Any help is appreciated.

>Solution :

The $event below will return true and false because you configure it as new EventEmitter<boolean>();.

<app-credit-card [(paymentForm)]="paymentForm" (isDirectExpressChecked)="isDirectExpressChecked($event)" *ngIf="isCreditCardPayment"></app-credit-card>

So to say, assign event to the variable isDirectExpressCard directly might fix your issue.

isDirectExpressChecked(event) {
  this.isDirectExpressCard = event; // <-- change this might fix your issue
  console.log("one-time-payment.component.ts isDirectExpressChecked this.isDirectExpressCard = " + this.isDirectExpressCard);  // THIS LINE DOES NOT EXECUTE
}