How to connect from one component to other in angular2

Question

I have 2 different component, which is of different modules too. now i am saving data in one component, that saved data must be fetched to the other component. How can i fetch data from component to component, Please help.

First component:

saveSidebar() {
    let params = { userGuID: this.uID, MenuIds: this.selectedMenuIds.toString() }
    console.log(params);
    this._Service.addUserMenu(params).subscribe((res) => {
      if (res.Header.Success) {

      }
    })
  }

Here the saved data must go to menu component which is in different component

simply define a shared service, send data to it and get from it. see stackblitz.com/edit/… — Lia
– Lia, Commented Dec 11, 2018 at 11:58
You can use share service , or you can implement the redux for sharing data or called state management. this will make you application more scalable — Sunny Goel
– Sunny Goel, Commented Dec 11, 2018 at 12:03
Possible duplicate of How do I share data between components in Angular 2? — Zze
– Zze, Commented Dec 11, 2018 at 12:04

andrea-f · Accepted Answer · 2018-12-11 11:58:48Z

2

You can use a service which is imported in both components and its data shared. So then you can update the service from the first component, then create an event listener on the other component which listens to the changes of the service and updates the ui/data accordingly.

answered Dec 11, 2018 at 11:58

andrea-f

1,05510 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhrungarajni Over a year ago

i have tried in this way only, but i am not able to get data as i need

andrea-f Over a year ago

@Bhrungarajni can you share the code you are trying?

Akshay Rajput · Accepted Answer · 2018-12-11 12:04:02Z

0

For parent-child communication you can use @input() @output(); For others, you can use services, register the service in parent module or root module, to learn more please visit below link. https://blog.nrwl.io/essential-angular-dependency-injection-a6b9dcca1761

answered Dec 11, 2018 at 12:04

Akshay Rajput

2,0781 gold badge15 silver badges22 bronze badges

Comments

this is yash · Accepted Answer · 2018-12-11 12:16:33Z

0

If multiple modules are using the same variable data, then it is better create a service in the app-root level, modify and access its variables wherever required in your project, a sample code of service

    import { Injectable } from '@angular/core';        

      @Injectable({
      providedIn: 'root'
      })
      export class UserinfoService {
        public userName : string = 'username'
      }

making the service injectable in the root level is necessary in order to access it all over the project.

answered Dec 11, 2018 at 12:16

this is yash

5331 gold badge3 silver badges15 bronze badges

Comments

Abhishek · Accepted Answer · 2018-12-11 13:37:48Z

0

You can use subjects or behavioral subjects. As change in one component will automatically get reflected in other component using subjects.

answered Dec 11, 2018 at 13:37

Abhishek

612 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to connect from one component to other in angular2

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related