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
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
provided through a parent module is key here though.filter-mobile.service, provide it properly and see if you can inject it into your router components and view its data.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
});
}
shareableData.asObservable() to not expose the Subject API too much. Also, try to not use <any> 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.You Should set all these data up to a service class.
1 - create a behaviorSubject atribuite and share all over your components
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.You can share data between different components using a service to store/pass the data around.
Basically, you should:
