Angular sharing the instance of a service between two components - service

Question

I am working on a code where I need to share the instance of the service. Here is the sample outline of the code where I am facing a trouble.
app.component.ts code:
import { Component } from '#angular/core';
import {ROUTER_DIRECTIVES} from '#angular/router';
import {HeaderComponent} from './header.component';
import {TotalContainer} from './container-total.component';
#Component({
selector: 'my-app',
template: `
<myheader [display]="display"></myheader>
<router-outlet></router-outlet>
`,
directives:[HeaderComponent,TotalContainer,ROUTER_DIRECTIVES]
})
export class AppComponent {
display = true;
}
My header component contains the nav-tabs which will update the
Now, one of the component which will replace the is container-total.component.ts
Now Inside the container-total.component.ts I have another component called bottom.component.
Here the code for container-total.component.ts
import {Component, OnInit} from '#angular/core';
import {BottomContainerComponent} from './bottom-container.component';
import {BlurredService} from '../services/blurred.service';
import {FollowUps} from '../properties/followups';
#Component({
selector:'container-total',
template:`
<div class="container" [class.blurred]="!display">
My Content of total container has to be blurred.
</div>
<bottom-container></bottom-container>
`,
styles:[`
.blurred{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px) grayscale(90%);
}
`],
directives:[BottomContainerComponent],
providers:[BlurredService]
})
export class TotalContainer implements OnInit{
display;
constructor(private blurredService: BlurredService){
}
checkBlurr(){
this.display = this.blurredService.getService();
}
ngOnInit(){
this.checkBlurr();
}
}
Now, I am updating the value for the display in the bottom-container.component using the same service. Here is the code
bottom-container.component.ts
import {Component, Output, EventEmitter, OnInit} from '#angular/core';
import {BlurredService} from '../services/blurred.service';
#Component({
selector:'bottom-container',
template:`
<div class="container" [class.blurred]="!display" (click)="displayPopup()">
This is the bottom container needed to be blurred.
</div>
`,
styles:[`
.blurred{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px) grayscale(90%);
}
`],
directives:[PopupComponent]
})
export class BottomContainerComponent implements OnInit{
display;
request:Requests = null;
constructor(private blurredService: BlurredService){
}
checkBlurr(){
this.display = this.blurredService.getService();
}
ngOnInit(){
this.checkBlurr();
}
displayPopup(){
this.blurredService.setService(false);
this.display = this.blurredService.getService();
}
}
Now, this is the service I have written.
blurred.service
import {Injectable} from '#angular/core';
#Injectable()
export class BlurredService{
display = true;
setService(value){
this.display = value;
}
getService(){
return this.display;
}
}
Now, When ever the div in bottom-container is getting clicked it is getting blurred. But not the div in the total-container, though I am updating the value through the service.
Should I call the function "checkBlurr" in total-container using EventEmitter from bottom-container. But if I do that, I might have more than one components in total-container for which I am going to implement the routing. Then how should I use the #Output and EventEmitter using the "".
Can any one help me with this?

Answer 1

You need to do something with your component interaction. The easiest thing would be to set the "display" property in your total component directly to the service:
<div class="container" [class.blurred]="!blurredService.getService()">
My Content of total container has to be blurred.
</div>