I want to call a function of another component which has no relation on the click
servive File
import { Injectable } from '@angular/core';
@Injectable()
export class ShareDetailsService {
clicked : boolean = false;
constructor() { }
}
component 2
@Component({
selector: 'app-component2',
templateUrl: './component2.component.html',
styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {
constructor(shareDetailsService : ShareDetailsService) { }
ngOnInit() {
if(shareDetailsService.clicked){
console.log("clicked");
}
}
Component 1
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
constructor(shareDetailsService : ShareDetailsService) { }
ngOnInit() {
if(shareDetailsService.clicked){
console.log("clicked");
}
}
someFunction(){
}
Component 1 Html
<div (click)="someFunction()"></div>
When I call the function using the click event it should call the function of the another component , I created a service file and where I am able to change the boolean variable.
I Want to call the function when there is a change in the boolean Variable rather than calling the function on ngOnit()
Use a subject to subscribe to it.
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs'
@Injectable()
export class ShareDetailsService {
clicked$ = new Subject();
}
// Any component can post and subscribe to it
@Component({
selector: 'app-component2',
templateUrl: './component2.component.html',
styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {
constructor(shareDetailsService : ShareDetailsService) {
this.sharedDetailsService.clicked$.subscribe(() => console.log('clicked')
}
onClick() {
this.sharedDetailsService.clicked$.next(); // dispatch the click
}
}