manage-employee.component.ts
@ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
gridForManageEmployee: any;
constructor(
private router: Router,
private employeeService: EmployeeService
) {
this.loadEmployeeData();
}
onEmployeeSelectionChanged(param) { //the event when someone selects an employee
if (this.dataGrid.selectedRowKeys.length === 1) {
this.disableFindEmployeeButton = false;
} else {
this.disableFindEmployeeButton = true;
}
this.selectedEmployee = param.selectedRowsData[0];
this.employeeService.sendSelectedEmployee(this.selectedEmployee); // send it to service
console.log(this.dataGrid.selectedRowKeys.length);
}
employee.service
@Injectable()
export class EmployeeService
{
selectedEmployeeSubject = new Subject<any>();
selectedEmployees = [];
constructor(private http: Http, private platformLocation: PlatformLocation, private apiResolver: ApiResolver) {
this._baseUrl = apiResolver.GetHumanResourceUrl(platformLocation);
}
sendSelectedEmployee(id: any) {
this.selectedEmployeeSubject.next(id);
}
getSelectedEmployee(): Observable<any> {
return this.selectedEmployeeSubject.asObservable();
}
}
menu.component.ts
constructor(public settings: SettingsService, private router: Router, private employeeService: EmployeeService) {
this.employeeService.getSelectedEmployee().subscribe( //listener in constructor
(selected: any) =>{
if(selected != null){
this.showReportLabel = true;
this.showSalaryPivotTable = true;
this.showTransactionsLabel = true;
this.showRoosterList = true;
}
console.log(selected);
}
);
}
ngOnInit() {
this.router.events.subscribe((event: any) => {
if (event instanceof NavigationStart) {
this.settings.hideSidebar("left");
}
});
this.employeeService.getSelectedEmployee().subscribe( //listener in ngOninit
(selected: any) =>{
if(selected != null){
this.showReportLabel = true;
this.showSalaryPivotTable = true;
this.showTransactionsLabel = true;
this.showRoosterList = true;
}
console.log(selected);
}
);
}
menu.component.html
<div class="list-nav-item" routerLinkActive="active" *ngIf="showSalaryPivotTable">
<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>
To achieve the desired behavior, I am attempting to modify the value of the menu property like showSalaryPivotTable to true in menu.component.ts when it listens to the employee selection event onEmployeeSelectionChange() (for displaying the hidden menu).
In order to accomplish this, I am using a Subject() in my service and expecting that after triggering onEmployeeSelectionChange() in the menu.component.ts, it would listen to that event, but it is not working as expected. Am I overlooking something crucial with this Observable concept?