How do i share data between sibling components in Angular dart

Question

How to share data to sibling component in Angular dart

How to share data dynamically between sibling components Could you please explain with an example

thanks.

Answer 1

<comp-root>
  <comp-a #foo ></sibling>
  <comp-b [data]="foo.passData()"></sibling>
</comp-root>

---

@Component(
  selector: 'comp-root',
  styles: [],
  template: '''
  <comp-a #foo ></sibling>
  <comp-b [data]="foo.passData()"></sibling>
''',
)
Class CompRoot {
    // do someting...


}

---

@Component(
  selector: 'comp-a',
  styles: [],
  template: ''' <a (click)="changeA()"> click 1</a> <a (click)="changeB()"> click 2</a> ''',
)
Class CompA {
  String pData;

  @Output
  String passData() => pData

  void changeA() => pData = 'Staf-1';
  void changeB() => pData = 'XYZ';
}

---

@Component(
  selector: 'comp-b',
  styles: [],
  template: ''' {{data}} ''',
)
Class CompB {

  @Input
  String data;

}

Answer 2

• You can use a shared service that is provided by the parent component or another common ancestor, inject it in both components and use it as mediator, for example with streams to actively notify about state changes.

• You can also use a field in the parent component that you pass to both

<sibling1 [data]="dataInParent"></sibling1>
<sibling2 [data]="dataInParent"></sibling1>

• You can reference use references in the template of the parent component

<sibling1 #foo1></sibling1>
<sibling2 [data]="foo1.data"></sibling1>