Angular 8 - How to export data from 1 component to 2 and then to 3

Question

How to export data from 1 component to 2 and then to 3?

I have a data object in the product-list.component.ts component:

    export class ProduktListComponent implements OnInit {
        productList = {};

        constructor(){}
        ngOnInit() {}

        getProdukt(){
        // ..
        this.productList= data; // this is an object
        }
    }

It is contained in product.component.html:

        <!--  code  -->
        <app-product-list [hidden]='!hideList'></app-product-list>
        <app-edit-product [hidden]='!hideEditt'></app-edit-product>

How to transfer data to app-edit-product from theapp-product-list component? So from the app-product-list component pass the data to app-edit-product

Thank you very much for your help

TourOfHeroes is the way to go.

Antoniossss
– Antoniossss

2019-11-14 00:06:44 +00:00
Commented Nov 14, 2019 at 0:06 — Antoniossss
– Antoniossss, Commented Nov 14, 2019 at 0:06

Smokey Dawson · Accepted Answer · 2019-11-14 00:36:02Z

There are a few different ways you could do this..

The quickest way would be to use a BehaviorSubject that you can use to set and get data from..

a simple implementation would be

Create a product service product.service.ts inside this service you need to create a behaviorSubject and create a set method

product.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ProductService
  productListSource = new BehaviorSubject<any>(null); // creates the BehaviorSubject

  // You will use this method to store the data
  setProductList(data: any) {
     this.productListSource.next(data)
  }
}

then what you want to do is in your product-list.component

product-list.component.ts

import { ProductService } from '...';

// ...

constructor(
  private _product: ProductService
) {} 

getProduct() {
  this.productList = data;
  this._product.setProductList(this.productList);
}

then wherever you want to get this information from you can do the following

component

import { ProductService } ...

// ...

constructor(
  private _product: ProductService
) {}

getProducts() {
  this._product.productListSource.subscribe(data => {
    // do stuff here
  })
}

This way, you can use the productList data anywhere in your app, and its not stuck within your product component as it would be if you used the @Input() @Output() method

Now If you plan on updating and manipulating this data a lot and using it from a few different components you should consider using an @ngrx/store. you can learn more about this here angular ngrx a clean and clear introduction

Rafi Henig · Accepted Answer · 2019-11-14 00:23:52Z

All you have to do is create a service, use a BehaviorSubject and inject it in both the components, assign the input value to the service setter and access it in the other component as obserbable.

export class EditProductComponent implements OnInit {
  list = []
  constructor(private storeService: StoreService) {}

  ngOnInit(){
    this.storeService.list$.subscribe(list => this.list = list)
  }
}

export class ProductListComponent implements OnInit {
  list = [1, 2, 3, 4, 5, 5]

  constructor(private storeService: StoreService) {}
  ngOnInit(){
    this.storeService.list = this.list
  }
}


@Injectable({
  providedIn: 'root',
})
export class StoreService {
  private listSoruce = new BehaviorSubject<any>(null);
  public list$ = this.listSoruce.asObservable();

  set list(v){ this.listSoruce.next(v)}
}

Collectives™ on Stack Overflow

Angular 8 - How to export data from 1 component to 2 and then to 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related