How to call a function in another component(Angular) Using RxJS

Hello, guys welcome back, in this article I'm going to show you how can we call a function which resides in another angular component. there are a lot of ways to do this but in this article, let's see how to do this using RxJS subject.

here is the video tutorial for this article

https://www.youtube.com/watch?v=kUc-rwbJtqY&ab_channel=hasangalakdinu

first of all, you have to create a new angular project. it can be called by any name that you want. in my case, it is ‘article’.

ng new article

and after that, you have to generate two components, I'm calling these two as sibling1 and sibling2.

ng g c sibling1
ng g c sibling2

good! , then you have to create a new service class. for communicating between the above two components. okay, let's create a service called ‘shared’ you can call it as you wish.

ng g s shared

okay, now its time to code... in this simple example project what we are going to do is. there is a button in sibling component1 by pressing it we are going to increment the count resides in sibling component2(it has the incrementCount() method). let's see how to do this. first of all you should include these new components into your app.component.html like this way,

<!--app.component.html-->
<app-sibling1></app-sibling1>
<app-sibling2></app-sibling2>

all good to go!. now let’s implement Shared service class your SharedService class should like this

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SharedService {
private subject = new Subject<any>();
sendClickEvent() {
  this.subject.next();
}
getClickEvent(): Observable<any>{ 
  return this.subject.asObservable();
}
}

then your caller class(sibling1 component) which has the button should be like this.

//sibling1.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from './../shared.service';
@Component({
selector: 'app-sibling1',
templateUrl: './sibling1.component.html',
styleUrls: ['./sibling1.component.scss']
})
export class Sibling1Component implements OnInit {
constructor(private sharedService:SharedService) { }
ngOnInit() {
}
clickMe(){
this.sharedService.sendClickEvent();
}
}

your sibling.component1.html should like this,

<p>sibling1 component!</p>
<button (click)="clickMe()">Click Me</button>

then the receiver class(sibling2.component.ts) should be like this

import { Component, OnInit } from '@angular/core';
import { SharedService } from './../shared.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-sibling2',
templateUrl: './sibling2.component.html',
styleUrls: ['./sibling2.component.scss']
})
export class Sibling2Component implements OnInit {
clickEventsubscription:Subscription;
constructor(private sharedService:SharedService) {
this.clickEventsubscription=    this.sharedService.getClickEvent().subscribe(()=>{
this.incrementCount();
})
}
count:number=0;
ngOnInit() {
}
incrementCount(){
this.count++;
}
}

your sibling2.component.html should be like this.

<p>sibling2 component</p>
<h2>{{count}}</h2>

finally, your app should like this.

if you click the ‘Click Me’ button(in sibling1 component) it should increment the count which is inside the sibling 2 component.

so guys in here we called the incrementCount() method in another component, pretty cool huh!!!

Conclusion

so in this article, I showed you how to call functions that reside in another component. I think this should be helpful for you for your day to day coding works. see you guys next time. until then happy coding!!!