What Is A Better Way And How To Achieve Sending Object From One Nested Component To Another

I'm working on simple application about products, basically when user choose a product it should be sent to another component which would hold product. Product is allways choosen

Solution 1:

There are a couple of strategies to solve this. Overall, this is a state management problem: Multiple components are working on one joint state.

Option 1: Parent Component Manages State

This might be the most simple solution.

• The parent component that holds all other components has a list of selected products.
• The child components that let the user pick a product have an @Output() EventEmitter that emits when the user picks a product. The parent component listens to that output and adds the emitted product to its list of products.
• The child components that display selected products have an @Input() array of products, based on which they display products. The parent component sets this input to its product list.

Option 2: State Service

Quickly implemented, but much cleaner separation of concerns than #1.

• Implement an @Injectable StateService. It has a) a BehaviorSubject<Product[]> with a list of products, b) a method addProduct(product: Product) that adds a product to the current value of the BehaviorSubject and emits it.
• Each component uses that service (constructor(stateService: StateService)). When the user picks a product, the component calls this.stateService.addProduct(product).
• Components that display products listen to changes in the service's product list: this.stateService.products.subscribe(products => this.products = products) and display the products accordingly.

Option 3: Use a State Store Library

Use something like NGRX or Redux that takes care of state management for you.

Solution 2:

you can add a productsSelected array to your ProductsComponent, into which you push selected products when selected and then pass it as an Input to your ReceiptItemComponent ( or ReceiptItemsComponent ). Don't forget of [()] -- box of bananas, two way data binding - if you are going to change the quantity in the child component but you are going to save the array in your parent component.

You could use a service also, that holds the selectedProducts as a behaviorSubject and inject it in both components. Then you have to subscribe to changes in both components to receive the updates.

Solution 3:

This is exactly what I wrote my library RxCache for. It gives push data flow to Angular applications without having to add the complexity and ridiculous amount of boiler plate code involved in adding a store like NGRX.

https://github.com/adriandavidbrand/ngx-rxcache

Testbed on StackBlitz - https://stackblitz.com/edit/angular-3yqpfe

A redo of the official ngrx example app can be seen here on StackBlitz - https://stackblitz.com/edit/github-tsrf1f