0

I'm trying to swap subcomponents using ngIf like:

<div *ngIf="paymentListShow" payment-list></div>
<div *ngIf="paymentFormShow" payment-form></div>

So, my parent component is intended to handle these values:

swapComponent(componentName: string): void {
    let paymentState = {
      'paymentList': (that): void => {
        that.paymentFormShow = false;
        that.paymentListShow = true;
      },

      'paymentForm': (that): void => {
        that.paymentListShow = false;
        that.paymentFormShow = true;
      }
    };

    paymentState[componentName](this);
}

Does it exist any more elegant way to swap subcomponents? Using rxjs Observables?

Any ideas?

1 Answer 1

1

Certainly not the best, but this could be a cleaner way:

show = {
  paymentList: true,
  paymentForm: false
}

swapComponent(componentName: string): void {
  for (const component in this.show) {
    if (this.show.hasOwnProperty(component)) {
      this.show[component] = (component === componentName) ? true : false;
    }
  }
}

Combined with:

<div *ngIf="show.paymentList" payment-list></div>
<div *ngIf="show.paymentForm" payment-form></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.