I have a parent, child, and sibling component. Whenever the parameter value is changed in the child component, the method in the sibling component should trigger and receive the updated value.
My issue is that I can successfully trigger the method from the parent component to the sibling component, but there is a delay in receiving the updated value at trigger time.
I suspect that using two different approaches for passing parameters and triggering methods might be causing the problem. Can someone please assist?
The method triggers from the parent component when the zip code changes in the child component, but the zip code value is not received at the sibling component during the trigger event.
getSiblingSettingFn() {
}
Child Component
@Component({
selector: 'child-cmp',
template: '<p>child</p>'
})
class ChildCmp {
@Output() childGInParameters = new EventEmitter<{ city: string, state: string, zip: string }>();
city: any = "Palmdale";
state: any = "CA";
zip: any = "93551";
setGeneralInfo() { // on change event
this.childGInParameters.emit({ city: this.city, state: this.state, zip: this.zip });
}
}
Parent Component
import { SiblingComponent } from '../SiblingComponent';
@Component({
selector: 'parent-cmp',
template: '<child-cmp (childGInParameters)="getGeneralInfo($event)" > </child-cmp>
<br/>
<sib-cmp [zip]="zip" [state]="state" [city]="city" ></sib-cmp>'
})
class ParentCmp {
@ViewChild('SiblingComponent') sibchild: SiblingComponent;
getGeneralInfo(childGInParameters: any) {
this.city = childGInParameters.city;
this.state = childGInParameters.state;
this.zip = childGInParameters.zip;
this.sibchild.getSiblingSettingFn();
}
}
Sibling Component
@Component({
selector: 'sib-cmp'
})
class SiblingComponent {
@Input() zip: any;
@Input() state: any;
@Input() city: any;
ngOnChanges(changes: SimpleChanges) {
const c: SimpleChange = changes.zip;
this.zip = c.currentValue;
}
getSiblingSettingFn() {
}
}