My goal is to update a value in a service from one component and retrieve it in another.
The structure of my components is as follows: parent => child => grandchild
When I modify the service value in the first child component, the parent receives the correct value from the service. However, if I update the value in a more nested child component, the parent does not get the accurate value.
Here is the code snippet:
service.ts
@Injectable()
export class ConfirmationDialogService {
componentHasDirtyForm: boolean; // value to set
constructor(private confirmationDialogReferenceService: ConfirmationDialogReferenceService,
private dialog: MatDialog) { }
parentComponent.ts
constructor(private confirmService: ConfirmationDialogService) {
}
ngOnInit() {
}
isDirty(): boolean {
console.log(this.confirmService.componentHasDirtyForm)
return this.confirmService.componentHasDirtyForm;
}
ChildComponent.ts
constructor(private confirmService: ConfirmationDialogService) { }
ngAfterViewChecked(){
this.confirmService.componentHasDirtyForm = this.generalInfoForm.dirty;
}
GrandchildComponent (rendered inside child component)
constructor(private confirmationService: ConfirmationDialogService) { }
ngAfterViewChecked(){
this.checkForDirtyForm();
}
checkForDirtyForm(){
for(var i = 0; i < this.ContactFormArr.length; i++){
if(this.ContactFormArr.at(i).dirty){
this.confirmationService.componentHasDirtyForm = true;
break;
}
}
}
In essence, in the grandchild component, I am attempting to update the `componentHasDirtyForm` property of the `ConfirmationDialogService`. It works correctly in the parent if updated from the child, but not from the grandchild.
I have also added the service as a provider in app.module.ts