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 parrent 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"
[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!
CodePudding user response:
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"
[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;
}
}
CodePudding user response:
you should configure the parent component by creating some method
for eg: in parent.component.ts
button : boolian = true;
buttonDisable(event: boolian) {
this.button = false;
}
then configure the parent HTML component
for eg:
<button [disable]=buttonDisabledEvent="buttonDisable($event)" >BUTTON</button>