Passing one component value to other component using Angular Observable

Passing one component value to other component using Angular Observable:

I have a sidebar component and store coupon component.

In the sidebar I have radio options named,
All
Coupon
Deal

And in the store coupon component I have both coupons and deals listed.

Now I would like to achieve,

1. On click of coupon radio button in the sidebar component it should pass the value “coupon” to store coupon component and display only the coupons.
2. On click of deal radio button in the sidebar component it should pass the value “deal” to store coupon component and display only the deals.
3. On click of all radio button in the sidebar it should pass the value “all” to store coupon component and display both coupons and deals.

 

How to share the string value between the components in angular ?
Basically we can share using two different ways,

1. @Input, @Output event emitter
2. Shared services.

 

Here we are going to see the example with shared services.

Create a shared service named “StoreCouponSidebarService” and paste the following,

[javascript]
import { Injectable } from ‘@angular/core’;
import { Observable } from ‘rxjs’;
import { Subject } from ‘rxjs/Subject’;
@Injectable()
export class StoreCouponSidebarService {
private couponTypeSubject = new Subject<any>();
constructor() { }

// method should be called from sender
onCouponTypeChange(couponType:string){
this.couponTypeSubject.next(couponType);
console.log(“coupon type in service component “+couponType);
}

// method should be called from receiver.
getCouponType():Observable<any>{
return this.couponTypeSubject.asObservable();
}
}
[/javascript]

sidebar-coupon-type.component.html:

When you select a coupon type value then it will call the onCouponTypeChange() method in the sidebar-coupon-type-component.ts which internally calls onCouponTypeChange() method which is inside the storeSidebarSharedService service.

[html]
<div class=”sidebar-cover hidden-sm-down”>
<h4 class=”cc-h4 font-weight-bold”> Filter by Type </h4>
<hr>
<div class=”custom-controls-stacked”>
<label class=”custom-control custom-radio”>
<input id=”all” name=”coupon-type” type=”radio” class=”custom-control-input” value=”all” checked=””
(change)=”onCouponTypeChange(‘all’)” >
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”><span class=”fs14″>All</span></span>
</label>
<label class=”custom-control custom-radio”>
<input id=”coupon” name=”coupon-type” type=”radio” class=”custom-control-input” value=”coupon” (change)=”onCouponTypeChange(‘coupon’)”>
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”><span class=”fs14″>Coupons</span></span>
</label>
<label class=”custom-control custom-radio”>
<input id=”Offer” name=”coupon-type” type=”radio” class=”custom-control-input” value=”offer” (change)=”onCouponTypeChange(‘offer’)”>
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”><span class=”fs14″>Offers</span></span>
</label>
</div><!– /.radio type ends –>
</div>
</div>
[/html]

 

sidebar-coupon-type.component.ts:

[javascript]
import { Component, OnInit } from ‘@angular/core’;
import { StoreCouponSidebarService } from ‘../../../services’;
@Component({
selector: ‘app-sidebar-coupon-type’,
templateUrl: ‘./sidebar-coupon-type.component.html’,
styleUrls: [‘./sidebar-coupon-type.component.css’]
})

export class SidebarCouponTypeComponent implements OnInit {
constructor(private storeSidebarSharedService : StoreCouponSidebarService) {
}

ngOnInit() {
}

onCouponTypeChange(couponType:string){
console.log(“sidebar selected value in sidebar component “+couponType);
this.storeSidebarSharedService.onCouponTypeChange(couponType);
}
}
[/javascript]

store-coupons.component.ts:

This store coupons component subscribes the getCouponType() method of shared service component, where as getCouponType() uses

“this.couponTypeSubject.asObservable()” which publishes the coupon type value whenever it changes it inside the onCouponTypeChange() because .next in observable.

[html]
import { Component, OnInit,OnDestroy } from ‘@angular/core’;
import { Subscription } from ‘rxjs/Subscription’;
import { StoreCouponSidebarService } from ‘../../shared/services’;
@Component({
selector: ‘app-store-coupons’,
templateUrl: ‘./store-coupons.component.html’,
styleUrls: [‘./store-coupons.component.css’]
})

export class StoreCouponsComponent implements OnInit,OnDestroy {
couponTypeSubscription:Subscription;
couponType : any = ‘all’;
constructor(private storeSidebarSharedService:StoreCouponSidebarService) {
this.couponTypeSubscription = this.storeSidebarSharedService.getCouponType().subscribe(couponType => {
this.couponType = couponType;
});
}

ngOnDestroy(){
this.couponTypeSubscription.unsubscribe();
}

ngOnInit() {
}
}
[/html]

store-coupons.component.html:

[html]
<div class=”row”>
<div class=”card coupon-type” *ngIf=”couponType==’offer’ || couponType==’all'”>
<div class=”coupon-description”>
It’s a deal!
</div>
</div>
<div class=”card offer-type” *ngIf=”couponType==’coupon’ || couponType==’all'”>
<div class=”coupon-description”>
It’s a coupon!
</div>
</div>
</div>
[/html]

 

 

Overview:

1. Get the sidebar values from sidebar html file to sidebar typescript file.
2. Pass the value to shared services from typescript file.
3. Use observable next to push latest value of the variable.
4. Get the changed value using observable in service component.
5. Call the getter method which we created in service component from the receiver component with subscribe to get the pushed updated value.