Angular 8/9 Communication between Components using Subject and Observable
Published: 2023-09-14 07:28:54

While working with angular, Very frequently we need to share data between components. There are various ways to share data between Angular components. These are:

1. Using @input()
2. Using @Output()
3. Using Services
4. Parent component calling ViewChild
5. Parent interacting with a child using a local variable
6. Using Observable and Subject

Here I will use Observable and Subject to share data between components. I will try to explain the basic use of it to share data between the components. For detailed information you can visit the official site of angular.

### Observable.subscribe()
The observable subscribe method is used by angular components to subscribe to messages that are sent to an observable.

### Subject.next()
The subject next method is used to send data to an observable which are then sent to all angular components that are subscribers of that observable.

### Let's Get Started

### Step 1: Create Angular App and Cart Service
create an Angular app with Angular CLI. and create a service named CartService and put below code inside that file:

``````mport { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
 
@Injectable({ providedIn: 'root' })
export class CartService {
private subject = new Subject<any>();
 
addToCart(product:string) {
this.subject.next({name:product});
}
 
clearCart() {
this.subject.next();
}
 
getCart(): Observable<any>{
return this.subject.asObservable();
}
}``````

### Step 2: App Component which receives data from Product Component
Cart service is used in this component to subscribe to new product data and push them into the products array.

``````import { Component, OnDestroy,OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { CartService } from './cart.service';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
 
export class AppComponent implements OnDestroy {
subscription: Subscription;
cart: any;
products: any[] = [];
constructor(private cartService: CartService) {
// subscribe to product component
this.subscription = this.cartService.getCart().subscribe(product => {
if (product) {
this.products.push(product);
} else {
// clear product
this.products = [];
}
});
}
 
ngOnDestroy() {
// unsubscribe to ensure no memory leaks
this.subscription.unsubscribe();
}
 
}``````

### Step 3: Product Component for sending product data

``````import { Component} from '@angular/core';
 
import { CartService } from '../cart.service';
 
@Component({
selector: 'app-home',
templateUrl: './product.component.html'
})
export class ProductComponent{
constructor(private cartService: CartService) {}
 
addToCart(): void {
// send product data to subscribers via observable subject
this.cartService.addToCart('Product item from Product Component to App Component');
}
 
clearCart(): void {
// clear cart
this.cartService.clearCart();
}
}``````

### Conclusion
In this demo, we understand the data sharing between angular components using Subject and Observable. You can find other demos at [Angular sample application](https://jsonworld.com/demo/angular-8-communication-between-components-using-subject-and-observable)

That’s all for now. Thank you for reading and I hope this post will be very helpful for **data sharing between angular 8 components using Subject and Observable.**

Let me know your thoughts over the email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share with your friends.

This article is originally posted over [jsonworld](jsonworld.com)