0

How can I detect a change happening in a sibling?

If I have this parent template calling the children:

<app-first-sibling></app-first-sibling>
<app-second-sibling></app-second-sibling>

Then in the first sibling template I have this:

<select (change)="onSelectChange()">
  <option>Test</option>
  <option>Test2</option>
</select>

Is there a way to trigger the onSelectChange() event within the second sibling?

export class SecondSiblingComponent {

  // onSelectChange() of first-sibling
  onSelectChange(){
    alert("Hello");
  }
}

So when I choose something in the selectbox I want to trigger the method sending alert("Hello");

Live example: https://stackblitz.com/edit/angular-hjrat3

Sinan Samet
  • 6,432
  • 12
  • 50
  • 93
  • 1
    Common solutions to this are to either bubble the events up then back down or use a shared service (services are singletons in angular so can be used to share state) – Liam Sep 18 '19 at 10:24
  • I managed to solve this problem by using a service as described in the link you duplicated this of: https://stackoverflow.com/questions/35878160/how-to-share-data-change-between-components – Sinan Samet Sep 18 '19 at 12:28

0 Answers0