import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ToggleService {

private showSidebar: BehaviorSubject<boolean>;

constructor() {
  this.showSidebar = new BehaviorSubject<boolean>(false);
}

  public getTheBoolean(): Observable<boolean> {
    return this.showSidebar.asObservable();
  }

  public setTheBoolean(newValue: boolean): void {
    this.showSidebar.next(newValue);
}

}






import { Component } from '@angular/core';
import { ToggleService } from '../toggle.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
  providers: [ToggleService]
})
export class NavbarComponent  {

  showSidebar: boolean = false;

  constructor(private toggleService: ToggleService) {
  }

  ngOnInit() {
    this.toggleService.getTheBoolean().subscribe(showSidebar => this.showSidebar = showSidebar);
  }

  toggleSidebar(){
    this.toggleService.setTheBoolean(!this.showSidebar);
    //alert(this.showSidebar)
  }

}




import { ToggleService } from './../toggle.service';
import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css']
  providers: [ToggleService]
})
export class SidenavComponent implements OnInit {

  showSidebar: boolean = false;

  constructor(private toggleService: ToggleService) {
  }

  ngOnInit() {
    this.toggleService.getTheBoolean().subscribe(showSidebar => this.showSidebar = showSidebar);
  }
  toggleSidebar(){
    this.toggleService.setTheBoolean(!this.showSidebar);
    //alert(this.showSidebar)
  }
}