title: Angular Subject() Observable, in different component not working
body: <h2>find-employee.component.ts</h2>
  
  
  
  <pre><code>  @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    gridForFindEmployee: any;
  
    constructor(
      private route: Router,
      private serviceEmployee: EmployeeService
    ) {
      this.loadDataToGrid();
    }
  
    onSelectionChanged(param) { //the event when someone select a employee
      if (this.dataGrid.selectedRowKeys.length === 1) {
        this.disableButtonFindEmployee = false;
      } else {
        this.disableButtonFindEmployee = true;
      }
      this.employeeSelect = param.selectedRowsData[0];
      this.serviceEmployee.sendSelected(this.employeeSelect); // send it to service
      console.log(this.dataGrid.selectedRowKeys.length);
     }
  </code></pre>
  
  <h2>employee.service</h2>
  
  <pre><code>@Injectable()
  export class EmployeeService
  {
      usersIsSelected = new Subject&lt;any&gt;();
      selected = [];
  
      constructor(private http: Http, private platformLocation: PlatformLocation, private apiResolver: ApiResolver) {       
          this._baseUrl = apiResolver.GetHumanResourceUrl(platformLocation);
      }
  
      sendSelected(id: any) {
          this.usersIsSelected.next(id);
      }
  
      getSelected(): Observable&lt;any&gt; {
          return this.usersIsSelected.asObservable();
      }
  }
  </code></pre>
  
  <h2>sidebar.component.ts</h2>
  
  <pre><code>    constructor(public settings: SettingsService, private router: Router, private serviceEmployee: EmployeeService) {
      this.serviceEmployee.getSelected().subscribe( //listener in constructor
        (selected: any) =&gt;{
          if(selected != null){
            this.reportLabel = true;
            this.PivotTableSalaryBoolean = true;
            this.transactionLabel = true;
            this.RoosterBoolean = true;
          }
          console.log(selected);
        }
      );
     }
  
  ngOnInit() {
      this.router.events.subscribe((event: any) =&gt; {
        if (event instanceof NavigationStart) {
          this.settings.hideSidebar("left");
        }
      });
      this.serviceEmployee.getSelected().subscribe( //listener in ngOninit
        (selected: any) =&gt;{
          if(selected != null){
            this.reportLabel = true;
            this.PivotTableSalaryBoolean = true;
            this.transactionLabel = true;
            this.RoosterBoolean = true;
          }
          console.log(selected);
        }
      );
    }
  </code></pre>
  
  <h2>sidebar.component.html</h2>
  
  <pre><code>&lt;div class="list-nav-item" routerLinkActive="active" *ngIf="PivotTableSalaryBoolean"&gt;
                      &lt;a routerLink="/payroll/employee-for-pivot-table-salary" class="list-nav-link"&gt;
                          &lt;span class="list-nav-icon"&gt;
                                &lt;i class="fa fa-adjust"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                          &lt;span class="list-nav-label"&gt;Pivot Table Salary&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>So what i'm trying to do is, in <code>sidebar.component.ts</code> i want to change the value of the sidebar property like <code>PivotTableSalaryBoolean</code> into <code>True</code> when it listen to the find-employee event <code>onSelectionChange()</code> (it's for the purpose show the hiding menu)</p>
  
  <p>and to do that , i'm using Subject() in my service and was hoping that after it trigger <code>onSelectionChange()</code>in the <code>sidebar.componnent.ts</code> it listen to that event, but it doesn't work like what i hope for... am i missing something important with this Observable stuff?</p>