Angular 8 Communication between Components using Subject and Observable - 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…
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.**
create an Angular app with Angular CLI. and create a service named CartService and put below code inside that file:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CartService {
private subject = new Subject();
addToCart(product:string) {
this.subject.next({name:product});
}
clearCart() {
this.subject.next();
}
getCart(): Observable{
return this.subject.asObservable();
}
}
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();
}
}
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
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.
#angular #web-development