want to control Parent component (menu hide/show) through child using services in angular 2

Question

I want to handle menu (hide/show) , which is in parent component through child component, using services in following way:

//app.component.ts (parent) : in this component i am using IsShow variable to hide/show menu; this variable is linked to main services:

import { Component } from '@angular/core';
import { PostsService } from './post.service'
import { post } from 'selenium-webdriver/http';

@Component({
  selector: 'app-root',
  templateUrl: '<div *ngIf="IsShow">
                 <li><a routerLink="/">Home</a></li>
                 <li><a routerLink="/about/11">About</a></li>
                </div>
               <router-outlet></router-outlet>',
  providers : [PostsService]
})
export class AppComponent {
  title = 'app';
  name = 'ali';

  IsShow : boolean ;

 constructor(private postService : PostsService ){
    this.IsShow = postService.IsShow;
    postService.showChange.subscribe((value) => { 
      this.IsShow = value; 
    });

  }


}

//about.component.ts (child) : in this i am using showToggle to toggle the value of IsShow variable in parent component using services:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostsService } from './post.service'

@Component({
  selector: 'about',
  template: '{{id}}<button (click)="showToggle()">show</button>',  
  providers : [PostsService]
})
export class AboutComponent {
   id ;
  private sub;

  constructor(private route: ActivatedRoute , private postService : PostsService) {}


  showToggle(){
    this.postService.showToggle();
  }

}

//app.services.ts: in services used show variable to link between two component

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PostsService{

    IsShow : boolean;
    showChange: Subject<boolean> = new Subject<boolean>();

    constructor(private http: Http){
         this.IsShow = false; 
        console.log("intialization of service module");
    }   

    showToggle(){
        console.log(this.IsShow);
        this.IsShow = !this.IsShow;
        this.showChange.next(this.IsShow);
    }


}

Is trying to toggle menu in about component using IsShow variable in services but this not working.

Answer 1

Please refer the example given in angular docs

Before subscribing to subject, You have to make it observable. So you service code should look line this.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PostsService {

  IsShow: boolean;
  private showChange: Subject<boolean> = new Subject<boolean>();
  showChangesObs = showChange.asObservable();
  constructor(private http: Http) {
    this.IsShow = false;
    console.log("intialization of service module");
  }

  showToggle() {
    console.log(this.IsShow);
    this.IsShow = !this.IsShow;
    this.showChange.next(this.IsShow);
  }
}

And you app.component.ts code should look like this.

import { Component } from '@angular/core';
import { PostsService } from './post.service'
import { post } from 'selenium-webdriver/http';

@Component({
  selector: 'app-root',
  templateUrl: '<div *ngIf="IsShow">
    < li > <a routerLink="/">Home</a></li>
      <li><a routerLink="/about/11">About</a></li>
                </div>
    <router-outlet></router-outlet>',
  providers : [PostsService]
})
export class AppComponent {
  title = 'app';
  name = 'ali';

  IsShow: boolean;

  constructor(private postService: PostsService) {
    this.IsShow = postService.IsShow;
    postService.showChangeObs.subscribe((value) => {
      this.IsShow = value;
    });

  }
}

UPDATES

Remove PostService Provider injection from individual components and add it into module level.