I have different components that are not related. When I select a company from the header component, I want to immediately display data that matches the selected company. Currently, the data changes only when I visit another page and then return, but I need it to update in real-time when I choose a company from the header.
Header.ts
companyData: Company;
companyId;
getCompany() {
this.companyService.getCompanies().subscribe(x =>
this.companyData = x
);
}
changeCompany(companyId) {
this.systemFunction.changeCompany(companyId);
}
common service.ts
private companySource = new BehaviorSubject('');
currentCompany = this.companySource.asObservable();
changeCompany(companyId: number) {
this.companySource.next(String(companyId));
}
Branch.ts
ngOnInit() {
this.systemFunction.currentCompany.subscribe(cid => this.companyId = cid);
this.systemFunction.changeCompany(this.companyId);
}
ngAfterViewInit() {
this.getBranches();
}
getBranches() {
this.branchService.getBranches().subscribe(b => {
Object.assign(this.branchData, b);
// tslint:disable-next-line:no-shadowed-variable
this.branchData = this.branchData.filter(b => b.CompanyId == this.companyId);
});
}