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

8
  • 1
    You could use a service common to both components Mar 3, 2019 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 3, 2019 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. Mar 3, 2019 at 19:02
  • @JijoCleetus Yes,im dealing with changing of data.Here properties of setAccount may change any time dynamically
    – HK123
    Mar 3, 2019 at 19:08
  • 1
    @JijoCleetus stackoverflow.com/questions/47376442/… this Helped
    – HK123
    Mar 3, 2019 at 19:50

1 Answer 1

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)
  }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.