Angular passing a value from child component to disable button in parent component

Question

I'm having trouble understanding how to use the @Output and EventEmitter to pass a boolean value from the child component to the button in the parent element to disable or enable it.

More specifically, I want that when the container with text is scrolled at the bottom (which is the child component) to pass the boolean value for a variable to the parent component which I can use with the [disabled] property.

The scroll calculation is already working, I'm only having trouble with the @Output and EventEmitter.

Here's the code - this is the child component:

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

  scrolledToBottom() {
    if (
      // container is scrolled to bottom
    ) {
      this.buttonDisabledEvent.emit(false);
      // or something like this maybe?
      this.buttonDisabledEvent.emit(buttonDisabled = false);
    }
}

The parent html:

<button
  type="button"
  class="lobyco-btn lobyco-btn-primary"
  [disabled]="buttonDisabled" <--- I need the new value to be used here
>
  Accept
</button>

I hope it's clear enough what I need and apologies in advance if anything is unclear - I'll be checking back very soon and update if needed - thank you so much for the help!

Answer 1

In the child-component you say this.buttonDisabledEvent.emit(false);

Then you have to catch the event in the ParentComponent HTML like this:

<app-child (buttonDisabledEvent)="onButtonDisabled($event)"></app-child>

<button
  type="button"
  class="lobyco-btn lobyco-btn-primary"
  [disabled]="buttonDisabled" <--- I need the new value to be used here
>
  Accept
</button>

And the ParentComponent TS would read as follows:

export class ParentComponent {
  buttonDisabled = false;

  onButtonDisabled(buttonDisabled: boolean) {
    this.buttonDisabled = buttonDisabled;
  }
}