2

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.

Avni Onur Pehlivan
  • 97
  • 7
  • 2
    Possible duplicate of [Angular 2 Sibling Component Communication](https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication) – Amit Chigadani Jul 11 '18 at 07:12
  • This question is for AngularDart the duplicated is for Angular. While the options are probably the same it might not be obvious to AngularDart users. – Günter Zöchbauer Jul 11 '18 at 08:57

2 Answers2

1

  • 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>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
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;

}
Avni Onur Pehlivan
  • 97
  • 7