0

How to transfer data between component Angular when they are more than one nesting?

For example:

<router-outlet> </router-outlet>
<filter-mobile></filter-mobile>

I need pass outcome data from component filter-mobile to any component inside <router-outlet> </router-outlet> it can be also nested component.

If you need more explanations, please leave comment

POV
  • 11,293
  • 34
  • 107
  • 201
  • 1
    I think the best way is using one of the state patterns to keep a state of the components and reach it from any component you want. – hunterTR Jun 03 '19 at 16:40
  • 2
    Possible duplicate of [How to pass data between two components in Angular 2](https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2) – ihor.eth Jun 03 '19 at 17:37

4 Answers4

1

The best practice for this is to have the component where you combine these two parts (in the HTML), act as a Smart Component and manage the data flows between the two. You could also provide a service on this level that the underlaying components can (Optionally?) inject as well and communicate through that. You will have to think about the data that will pass through there, but it's another way you can achieve it.

Especially when the filter-mobile component is the source of the events you are interested in, you can have a more tightly connected service to that component where it emits it's events to. The components depending on your router will then (optionally) have to listen to this service and act on its messages.

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Bjorn 'Bjeaurn' S
  • 3,861
  • 2
  • 18
  • 29
  • If we talk about service, it should be singleton service, right, to store statement for all components? – POV Jun 03 '19 at 16:42
  • 1
    Services by default are singletons, unless you overwrite them. So a service that lives next to the component creating the events, provided through a parent module should be perfect for what you're looking for. The `provided through a parent module` is key here though. – Bjorn 'Bjeaurn' S Jun 03 '19 at 16:43
  • I would recommend you give it a shot with a `filter-mobile.service`, provide it properly and see if you can `inject` it into your router components and view its data. – Bjorn 'Bjeaurn' S Jun 03 '19 at 16:43
0

The "best" way is using services .You can use the services to communicate between the different components.

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

@Injectable()
export class ShareableServiceService {

/**
* Choose your dataType
*/
public shareableData: BehaviorSubject<any> = new BehaviorSubject()

constructor() { 


}


  public updateData(newContent: any): void  {
    this.shareableData.next(newContent);
  }

}
//COMPONENT 
import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
  export class AppComponent  {
  name = 'Angular';

  constructor(private  service: ShareableServiceService) {

  this.service.shareableData.subscribe(data => {

    //DO SOMETHING TO YOUR DATA HERE
  });

  }
davidwillianx
  • 391
  • 2
  • 5
  • 13
Manrah
  • 556
  • 3
  • 13
  • I would recommend at least making it private and retrieving the Observable through either a function or assigning a public variable through the `shareableData.asObservable()` to not expose the Subject API too much. Also, try to not use `` if you have an idea of what you will be expecting in regards of messages. Making coding against it easier and actually less error prone. – Bjorn 'Bjeaurn' S Jun 04 '19 at 04:28
0

You Should set all these data up to a service class.

1 - create a behaviorSubject atribuite and share all over your components

davidwillianx
  • 391
  • 2
  • 5
  • 13
  • Could you be more detailed? – POV Jun 03 '19 at 16:42
  • Sure! https://angular-anuy8v.stackblitz.io checkit out this *non functional* sample where I created a service with one subject atribuite; 1 - My service will be responsible for maintain the last data version and "share" , via observables to all subscribers – davidwillianx Jun 03 '19 at 16:52
  • 1
    Please do not start throwing around `BehaviorSubjects` without proper explanation. They tend to lead to bad practices, expose dangerous API's to services and components if not dealt with properly and are usually not even necessary due to the vast amount of creation operators that RxJS provide. Surely, there's good reasons to use Subjects in certain situations, but be careful. – Bjorn 'Bjeaurn' S Jun 03 '19 at 17:00
0

You can share data between different components using a service to store/pass the data around.

Basically, you should:

  1. Create a service
  2. Add some public properties to hold the data
  3. Inject the service into the components
  4. Update these components to use the service to store the data.

I created an oversimplified example here (stackblitz)

RCKSTR
  • 86
  • 8