4

Here i want to communicate between two components of a same parent.Basically,i want to pass the data from one component to another.

FirstComponent.ts

constructor(
    private service: service1,
    private serve: service2,
) {}

ngOnInit() {
    this.service.getUser().subscribe((data) => {
        this.serve.setAccount("1", "apple");
        this.serve.setEnvironment("Happy"); 
    })
}

SecondComponent.ts

constructor(private usingService : service2) { }

 ngOnInit() {
 this.Account = this.serve.getAccount();
 this.environmentDetails = this.serve.getEnvironment();

 }

I need to retrieve data from firstComponent to second.here first component is loading after the second component.soo,the data set by first component comes later by in picture.

Tried using subject of rxjs.but,How can we use subject in firstComponent.ts of this example?

How i can communicate between these two components being they are siblings of each other?please help

HK123
  • 199
  • 2
  • 3
  • 17
  • 1
    You could use a service common to both components – Jijo Cleetus Mar 03 '19 at 18:53
  • @JijoCleetus Thank you...yes,agree.But, can't i use subject on a component in this case?i want to keep services as same – HK123 Mar 03 '19 at 18:58
  • If you are dealing with a changing data and you need to show the current state of the data, then you can go for subject. Anyway, i would advise separate the subject in a service. – Jijo Cleetus Mar 03 '19 at 19:02
  • @JijoCleetus Yes,im dealing with changing of data.Here properties of setAccount may change any time dynamically – HK123 Mar 03 '19 at 19:08
  • you can use a subject in `setAccount` method inside the service and that you can observe in Component2. Make sure you are importing and using the same service – Jijo Cleetus Mar 03 '19 at 19:11
  • Possible duplicate of [Angular 2 Sibling Component Communication](https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication) – miselking Mar 03 '19 at 19:14
  • @JijoCleetus tried the way.But,seem to be not working.How can i fetch data to a new component set in a old component from one service to another service? – HK123 Mar 03 '19 at 19:32
  • 1
    @JijoCleetus https://stackoverflow.com/questions/47376442/angular-4-how-to-pass-api-data-from-one-component-into-another-component this Helped – HK123 Mar 03 '19 at 19:50

1 Answers1

7

You could use @Input() @Output() decorators with an EventEmitter. The parent component will set data on the children via a binding. The children will emit new data back to the parent and reset the data that the children receive.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
              <app-first-component 
                  [data]="data" (onData)="updateData($event)"></app-first-component>
              <app-second-component 
                  [data]="data" (onData)="updateData($event)"></app-second-component>
            `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  public data: any;

  constructor() {}

  updateData(event) {
    this.data = event;
  }

}

first.component.ts

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements {

  @Input()
  public data: any

  @Output()
  public onData: EventEmitter<any> = new EventEmitter<any>();

  constructor() { }

  updateData(data) {
    //send data back to parent
    //data could be coming from a service/async http request as well.
    this.onData.emit(data)
  }

}

second.component.ts

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements {

  @Input()
  public data: any

  @Output()
  public onData: EventEmitter<any> = new EventEmitter<any>();

  constructor() { }

  updateData(data) {
    //send data back to parent
    //data could be coming from a service/async http request as well.
    this.onData.emit(data)
  }

}
Jason White
  • 5,495
  • 1
  • 21
  • 30