CODEWITHSUNDEEP
angular
Kristijan Mirčeta
Kristijan Mirčeta

Reputation: 103

How to pass data between components that get replaced by another component and back in Angular 2?

It was kind of hard to state the problem in a single line, but here is a more detailed explanation:

Suppose you have a screen where you filter rocketships by some filters, lets call them F. A filter can be anything - a radio button, input field, or others. You have a 'show' button, that renders some data in grid, depending on your settings for filters.

Among the filters, there is a 'select model' button.

When you click this select model button, it takes you to another screen, where you have another set of fields, like a big functionality that lets you determine the rocketship model. When you click a button that says 'OK', it needs to return you to the first functionality and send the data about what you've chosen as the rocketship model.

What if there was another level to this, and when you were choosing the rocketship model, you would have to move to another functionality to select the rocketship idontknowwhat?

How would you go about implementing this functionality in Angular? Should I use the router, popups or something else?

Upvotes: 0

Views: 145

Answers (1)

samAlvin
samAlvin

Reputation: 1678

Passing data between components that get replaced by another component, I assume there is a data which can be read and modified by multiple components. To achieve this you can use router, with the help of angular service, dependency injection, behavior subject, and subscription.

First you create an angular service with a behaviorSubject property as the data:

@Injectable()
export class DataService()
{
  public data: Subject<any> = new BehaviorSubject<any>(null);

  changeData(newData: any) {
    this.data.next(newData); // this will update the value of the `data` with `newData`, and any component which subscribe to `data` will get the updated value of `data`.
  }
}

An injectable service is able to keep the data while the user jumps from a component to other component. The next step is to inject this service to your components which need the data. Let's take ComponentA and ComponentB need the data for example:

@Component({
  selector: 'component-a'
  providers: [DataService],
  templateUrl: `component-a.html`
)}

export class ComponentA {
  constructor(private dataService: DataService) {
    this.dataService.data.subscribe((value) => {
      // here, component A able to always get the updated value of the data when its value is changed.
    });
  }
}

And for ComponentB, let's say this component has the ability to replace (or update) the data:

@Component({
  selector: 'component-b'
  providers: [DataService],
  templateUrl: `component-b.html`
)}

export class ComponentB {
  constructor(private dataService: DataService) {
    this.dataService.data.subscribe((value) => {
      // here, component B able to always get the updated value of the data when its value is changed.
    });
  }

  changeData(newData: any) {
    this.dataService.changeData(newData); // this call will update the value of the data which DataService keeps, therefore when user jump to ComponentA, ComponentA will retrieve the updated value from `this.dataService.data`'s subscription
  }
}

Now, when you use router which route these two components, whenever user navigate to one component, that component will get the latest value of the data.

Upvotes: 1

Related Questions