Welcome to Part-2 of 2-series Sharing Data between components in Angular
Part 1: Sharing Data from Parent to Child Component and Child to Parent
Part 2: Sharing Data between non-parent-child(siblings) related components
In Previous Post, We have seen how can we can use @Input, @Output and @Viewchild to share data between Parent-Child Components, In this post, we will talk about how we can share data between components those are not related.
For Components those are not related, we can provide them common place where data exchange can happen, and that common place is Services.related.
Components can talk to each-other via services, injected in components.related.
Here is link to demo project of Product and Cart Components, our goal is to send product to cart when user clicks on ‘Add to Cart’related.
Product Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
<div class="product">
<div class="card">
<img src="https://cdn.pixabay.com/photo/2014/04/09/09/56/marbles-319938_960_720.jpg" alt="Denim Jeans" style="width:100%">
<h3>Marbles</h3>
<p class="price">$19.99</p>
<p><button class="btn btn-primary">Add to Cart</button></p>
</div>
</div>
Cart Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
So product component has product that we want to pass it to Cart component, Let us create new service under services folder with one method
Service will have 2 methods, SetCaetData and GetCartData,
Name of methods are self-explantory, one sets cart data and other one gets cart data. Here is code for those methods:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ProductService {
ProductName : string;
Price: number
SetCartData(productName: string, price: number) {
this.ProductName = productName,
this.Price = price
}
GetCartData() {
return { productName : this.ProductName, price : this.Price}
}
}
Now let us use those methods in our components, first, send data from product component to service to set data.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../_services/Product.service';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor(private productService: ProductService) { }
AddtoCart(productName: string, Price: number) {
this.productService.SetCartData(productName, Price);
}
ngOnInit() {
}
}
1
2
3
4
5
6
7
8
<div class="product">
<div class="card">
<img src="https://cdn.pixabay.com/photo/2014/04/09/09/56/marbles-319938_960_720.jpg" alt="Denim Jeans" style="width:100%">
<h3>Marbles</h3>
<p class="price">$19.99</p>
<p><button class="btn btn-primary" (click)="AddtoCart('Marbles', 19.99)">Add to Cart</button></p>
</div>
</div>
After bringing ProductService in Constructor, we can use it on button click to add data to cart, for simplicity I am passing static values to AddtoCart method,
Now that we have set data in Service, We can easily consume and show it in cart when user click on “Show cart”
Here is how cart component look like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../_services/Product.service';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
productName: string;
Price: number;
constructor(private productService: ProductService) { }
ngOnInit() {}
showcart() {
const product = this.productService.GetCartData();
if (product) {
this.productName = product.productName;
this.Price = product.price
}
}
}
1
2
3
4
5
6
7
<div class="cart"><br />
<a href="#" (click)="showcart()" >Show Cart</a>
<div class="card" *ngIf="productName">
<div>Product Name : </div>
<div>Product Price : </div>
</div>
</div>
Same as Product component, After injecting service into constructor, we can use GetCartData method of service to bring Product Data and show it on UI
Please click here to see demo and source code
Thank you.
Comments powered by Disqus.