I'm currently working with a parent and child component setup.
Within the child component, I have a button configured like this:
//child.component.html
<button mat-raised-button [disabled]="!form.valid || submitButtonDisable" type = 'Submit' color='primary' >
{{generateButton}}
</button>
//child.component.ts
@Output() onGenerateReport: EventEmitter<any> = new EventEmitter<any>();
@Input() generateButton: String;
OnSubmit() {
this.onGenerateReport.emit(this.parameterRequest); // sending data to parent after button click
this.submitButtonDisable = true;
this.generateButton = 'Generating...'
}
Let's take a look at the parent component below:
// parent component.html
<child-component
(onGenerateReport)="handleGenerateReport($event)"
[generateButton] = "generateButton | async">
</child-component>
//parent.component.ts
generateButton: Observable<String >;
handleGenerateReport($event: ParameterRequest) { // event listener
this.store.dispatch(new fromStore.SendRequest($event));
this.store.select(fromStore.isDataLoaded).pipe(take(1)).subscribe(data => {
if(data) {
this.generateButton = of('Generate'); // trying to pass this data back to child
}
})
}
The goal is to update the label of the button in the child component once the request is successful.
However, there seems to be an issue with ngrx select where data is not being passed to the child component. Is there something that I might be overlooking?