we have two components shared same service, we change the service value in one component that value i need to update other component also.
app.component.ts
import { Component } from '@angular/core';
import {ConfigurationService} from './first.servvice';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers : [ConfigurationService]
})
export class AppComponent {
title : boolean;
constructor(private configurationService:ConfigurationService){
this.title = this.configurationService.toggle;
}
}
@Component({
selector: 'app-root1',
templateUrl: './app.component1.html',
providers : [ConfigurationService]
})
export class AppComponent1 {
title : boolean;
constructor(private configurationService:ConfigurationService){
this.title = this.configurationService.toggle;
}
change(){
this.configurationService.toggle = ! this.configurationService.toggle;
this.title = this.configurationService.toggle;
}
}
Service .ts
import {Injectable} from "@angular/core";
@Injectable()
export class ConfigurationService {
toggle :boolean = false;
}
i need to update the service value when we update the service value in other components also.
Code: