Passing objects between unrelated components in Angular 2

Question

Passing objects between unrelated components in Angular 2

I am looking for a way to transmit data to another component from a Component that is neither a direct child nor parent.

To better explain my question, I have put together a Plunker example.

When the code snippet below is triggered, I need some mechanism in place to capture it.

 fillSelectT(item){
  //populate Select to
}

The following piece of code should be able to receive and process the transmitted data.

  listener(item){
    selectedItems.push(item);
  }

It's akin to an EventAggregator concept found in C#, which I am attempting to emulate here.

typescript angular2-services

Answer 1

Answer №1

According to the documentation provided here, it is recommended to utilize a shared service between two components. Emit events from the service when selecting an item, and then listen for the emitted events from the other component.

@Injectable()
class SelectionService {
  selections = new Subject<any>
  select(item) {
    this.selections.next(item);
  }
}

Your plunkr has been modified: http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

Answer 2

According to the documentation provided here, it is recommended to utilize a shared service between two components. Emit events from the service when selecting an item, and then listen for the emitted events from the other component.

@Injectable()
class SelectionService {
  selections = new Subject<any>
  select(item) {
    this.selections.next(item);
  }
}

Your plunkr has been modified: http://plnkr.co/edit/qJ8bh7wN9qQvKTLJOb0T?p=preview

Answer 3

Answer №2

I have implemented a fully functional example based on your code.

1) Both components are nested within the AppComponent. Create variables and events to handle and store the selected items:

selectedItems: any[] = [];

onSelectItem(item) {
   this.selectedItems.push(item);
}

<select-from (onSelectItem)="onSelectItem($event)"></select-from>
<select-to [selectedItems]="selectedItems"></select-to>

2) Update the select-from component to emit an event:

@Output() onSelectItem = new EventEmitter<any>();

 fillSelectT(item){
      this.onSelectItem.emit(item);
 }

3) Modify the select-to component to accept a list from its parent component:

@Input() selectedItems:any = [];

Check out the changes made here: Plunker Link

Answer 4

I have implemented a fully functional example based on your code.

1) Both components are nested within the AppComponent. Create variables and events to handle and store the selected items:

selectedItems: any[] = [];

onSelectItem(item) {
   this.selectedItems.push(item);
}

<select-from (onSelectItem)="onSelectItem($event)"></select-from>
<select-to [selectedItems]="selectedItems"></select-to>

2) Update the select-from component to emit an event:

@Output() onSelectItem = new EventEmitter<any>();

 fillSelectT(item){
      this.onSelectItem.emit(item);
 }

3) Modify the select-to component to accept a list from its parent component:

@Input() selectedItems:any = [];

Check out the changes made here: Plunker Link

Passing objects between unrelated components in Angular 2

Answer №1

Answer №2

Similar questions

Is it possible for TypeScript to automatically determine the type of an imported module based on its path?

Angular - Issue: Attempting to access properties on undefined (specifically 'forEach')

Building a personalized action bar with versatile features using React and TypeScript: A step-by-step guide

In React Router v6, you can now include a custom parameter in createBrowserRouter

How to Generate a JPG File from a Leaflet Map in Angular 4 using Typescript

Angular's ng-model is unable to access the value of an object array

The type 'false' cannot be assigned to the type 'EventEmitter<any>'

Tips for updating the 'value' attribute content in Playwright for Angular version 15

What is the most effective method for obtaining the ViewContainerRef of a mat-row in Angular 4

Does anyone have experience using the useRef hook in React?

Axios Error: Header content contains an invalid character ['adapter']

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

The challenge with handling dates in PrimeNG datatable on Angular

Using NodeJS to retrieve data from Firestore and then transmitting it to a Google Spreadsheet

Typescript function incorrectly returns Protractor's "element.all" output as Promise<string> instead of Promise<string[]>

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

How can I access properties of generic types in TypeScript?

The specified type '(Person | undefined)[]' cannot be assigned to the type 'People'

Angular displaying a slice of the data array

Incorporating TypeScript into a project that already contains .js files