I'm trying to get the updated value from a service variable (isSidebarVisible
) which is keeps on updated by another component (header
) with a click event (toggleSidebar
).
sidebar.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SidebarService {
isSidebarVisible: boolean;
sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();
constructor() {
this.isSidebarVisible = false;
}
toggleSidebarVisibilty() {
this.isSidebarVisible = !this.isSidebarVisible
this.sidebarVisibilityChange.next(this.isSidebarVisible);
}
}
sidebar.component.ts
export class SidebarComponent implements OnInit {
asideVisible: boolean;
_asideSubscription: any;
constructor(private sidebarService: SidebarService) {
this.asideVisible = sidebarService.isSidebarVisible
this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
this.asideVisible = value
})
}
ngOnInit() {
}
}
header.component.ts (Where service variable is updated)
export class HeaderComponent implements OnInit {
isSidebarVisible: boolean;
_subscription: any;
constructor(private sidebarService: SidebarService) {
this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
this.isSidebarVisible = value
})
}
toggleSidebar() {
this.sidebarService.toggleSidebarVisibilty()
}
ngOnInit() {
}
}
I can see the service variable value change in header.component.html
when {{ isSidebarVisible }}
but In sidebar.component.html
it always prints the default value and never listened to the changes.
Please help me fix this.
Move subscription to the service, and both components can access this value. If you need value only once, you can use it directly (like I did in sidebar.component); If you need to update something with this value it you can use getter (example in header.component).
@Injectable()
export class SidebarService {
isSidebarVisible: boolean;
sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();
constructor() {
this.sidebarVisibilityChange.subscribe((value) => {
this.isSidebarVisible = value
});
}
toggleSidebarVisibility() {
this.sidebarVisibilityChange.next(!this.isSidebarVisible);
}
}
export class SidebarComponent {
asideVisible: boolean;
constructor(private sidebarService: SidebarService) {
this.asideVisible = sidebarService.isSidebarVisible;
}
}
export class HeaderComponent {
constructor(private sidebarService: SidebarService) { }
get isSidebarVisible(): boolean {
return this.sidebarService.isSidebarVisible;
}
toggleSidebar() {
this.sidebarService.toggleSidebarVisibility()
}
}
You can also subscribe to the subject in either/both components and get the value there:
this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});
If you want to know more about Subjects take a look here.