CODEWITHSUNDEEP
javascriptangulartypescriptrxjsobservable
CamelToe
CamelToe

Reputation: 1

Angular Subject() Observable, in different component not working

find-employee.component.ts

  @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);
   }

employee.service

@Injectable()
export class EmployeeService
{
    usersIsSelected = new Subject<any>();
    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<any> {
        return this.usersIsSelected.asObservable();
    }
}

sidebar.component.ts

    constructor(public settings: SettingsService, private router: Router, private serviceEmployee: EmployeeService) {
    this.serviceEmployee.getSelected().subscribe( //listener in constructor
      (selected: any) =>{
        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) => {
      if (event instanceof NavigationStart) {
        this.settings.hideSidebar("left");
      }
    });
    this.serviceEmployee.getSelected().subscribe( //listener in ngOninit
      (selected: any) =>{
        if(selected != null){
          this.reportLabel = true;
          this.PivotTableSalaryBoolean = true;
          this.transactionLabel = true;
          this.RoosterBoolean = true;
        }
        console.log(selected);
      }
    );
  }

sidebar.component.html

<div class="list-nav-item" routerLinkActive="active" *ngIf="PivotTableSalaryBoolean">
                    <a routerLink="/payroll/employee-for-pivot-table-salary" class="list-nav-link">
                        <span class="list-nav-icon">
                              <i class="fa fa-adjust"></i>
                          </span>
                        <span class="list-nav-label">Pivot Table Salary</span>
                    </a>
                </div>

So what i'm trying to do is, in sidebar.component.ts i want to change the value of the sidebar property like PivotTableSalaryBoolean into True when it listen to the find-employee event onSelectionChange() (it's for the purpose show the hiding menu)

and to do that , i'm using Subject() in my service and was hoping that after it trigger onSelectionChange()in the sidebar.componnent.ts it listen to that event, but it doesn't work like what i hope for... am i missing something important with this Observable stuff?

Upvotes: 0

Views: 1333

Answers (2)

Immad Hamid
Immad Hamid

Reputation: 789

First try to change the subject initialization:

usersIsSelected : Subject<any> = new Subject<any>();

If it doesn't work then, you can try this way:

find-employee.component.ts instead of

this.serviceEmployee.sendSelected(this.employeeSelect);

use this

this.serviceEmployee.usersIsSelected.next(this.employeeSelect);

and the place where you need the data to be returned you can just subscribe to usersIsSelected itself only:

this.serviceEmployee.getSelected().subscribe(
   (res) => this.someThing = res // and further perform the other activities
);

Upvotes: 0

Mithil Mohan
Mithil Mohan

Reputation: 243

Try using replay subject which doesn't need any intialization

import {ReplaySubject } from 'rxjs/Rx';
@Injectable()
export class EmployeeService
{
    usersIsSelected = new ReplaySubject<any>(1);
    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<any> {
        return this.usersIsSelected.asObservable();
    }
}

Upvotes: 1

Related Questions