Access variable from one component into another

Question

Im trying to do some angular project, but im not into web development. Its simple shop.
I wanted to get some informations from sqlite by Play Framework. It is working.

After I receive it in angular and display. Its working too. Service:

@Injectable()
export class ProductService {

constructor(private http: Http) { }

getProducts() {
  const headers: Headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Content-Type', 'application/json');

  const options = new RequestOptions({headers: headers});

  return this.http.get('http://localhost:9900/', options)
  .map(response => <Product[]>response.json());
 } 
}

And place when i take all products:

export class ProductComponent implements OnInit {

public products: Product[];
actualProduct: Product;
productForm: FormGroup;
public quantity: number;
private activeFilter: string = "reset";
public allFilters: Array<string>;


constructor(private productService: ProductService,private router:Router) {
  this.allFilters =  ['ocean', 'river', 'aquarium', 'reset'];
}

ngOnInit() {
  this.productService.getProducts().subscribe(data => this.products = data);
}

public getActualProduct() {
  return this.actualProduct;
}

clickedProduct(product) {
  this.actualProduct = product;
  let link = ['/detail', product.prodId];
  this.router.navigate(link);
}

public setFilter(filter: string) {
 this.activeFilter = filter;
 }
}

So my question: how can I access to array products in other components? Cause now, when i click on button with function clickedProduct its working perfect. It display in console object product. But when I try to use product to display product details in other component I fail:

 export class ProductDetailComponent implements OnInit {

 selectedProduct: Product;
 products: Product[];
 quantity: number;

 constructor(
 private productService:ProductService,
 private productComponent: ProductComponent,
 private route:ActivatedRoute,
 private location:Location,
  // private cartStore: CartStore
 ) {  }

ngOnInit() {
    this.selectedProduct = this.productComponent.getActualProduct();
}

addToCart(product) {
  console.log(this.selectedProduct)
  console.log(product)
  //this.cartStore.addToCart(product, this.quantity || 1)
}

goBack() {
    this.location.back()
 }
}

How can I get actualProduct variable in ProductDetailComponent, or how can I get array of all products? I tried use "@Input() actualProduct: Product" in productComponent, but It actually doesnt work. Thanks for help.

Answer 1

This is strongly related to the way that those components are related to each other.

If there is a parent-child relation, you can pass information to the child component by using @Input properties, and listen to the child events in the parent by means of @Output properties.

If such a relation between the components doesnt exist (for example routed components), then the most common option is to create a service that manages the information/event flow between the components.

For furhter information please take a look in the docs