components interaction 2 way angular

Question

I have 2 components - one for a list of items and one for several buttons like save,cancel,summary etc.

In my buttons component I am using inputs and outputs to call the methods I need.

<button type="button" class="btn btn-danger ml-3" (click)="submit(true)" *ngIf="allowUserToFinalize(false)">
  Submit
</button>

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="allowUserToFinalize(true)">
  Cancel
</button>

allowUserToFinalize(false) -> this method is on items component and I have to send a parameter to it and use the returned value. I have tried to do that with Output and Input - I emit an event with the param value to the item component, call the allowUserToFinalize(param) and then the result is send via Input to the button component and it is used in the ngIf directive. This is working only on init, it sends event=undefined, it returns true and then it is not triggered anymore. Is there another method to do this interaction?

items html

<app-items-action-buttons>
    (allowUserToFinalize)="allowUserToFinalize($event)"
    [allowUserToFinalize]="allowUserToFinalize()">

  </app-items-action-buttons>

items ts

allowUserToFinalize(submit: boolean) {
      if (submit) {
  return false;
} else {
  return true;
}

}

butons ts

  @Output() allowUserToFinalizeEvent: EventEmitter<any> = new EventEmitter();
  @Input() allowUserToFinalizeInput;

  allowUserToFinalize(submit: boolea) {
    this.allowMerchantToFinalizeDealEvent.emit(submit)
  }

buttons html

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="allowUserToFinalizeInput">
  Cancel
</button>

IAfanasov IAfanasov · Accepted Answer · 2020-05-05T08:43:58

That is quite a complicated data flow. Lemme try to propose a simpler one:

<button type="button" class="btn btn-danger ml-3" (click)="submit(true)" *ngIf="showSubmit">
  Submit
</button>

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="showCancel">
  Cancel
</button>

<app-items-action-buttons>
    [showSubmit]="allowUserToFinalize(true)"
    (showCancel)="allowUserToFinalize(false)"
>
</app-items-action-buttons>

And if you still want to keep the data flow you wanted to use originally. This way you need to pass the callback (think of callback hell right away) as in input property:

 @Input() allowUserToFinalizeInput: (isSubmit:bool) => bool;

and use it right the way you use it now. there is no event here and no need for @Output property

components interaction 2 way angular

1 Answers