I currently have 3 components in my Angular application: 1. LeftMenuComponent 2. AppComponent 3. SummaryComponent
Additionally, I have two services - one for making REST calls and another for sharing data among components (RestService, ComponentService).
When selecting an item from the list in LeftMenuComponent, I call the loadService() function which then emits a function contained in the summaryComponent service. This function subscribes to the RestService to fetch and emit data.
Everything is functioning as expected, but I'm facing an issue where I need to click twice for the data to change and reflect in the SummaryComponent on a single click.
I attempted using rxjs/Subscription but encountered the same result.
Here's the code snippet from left-menu-component.html:
<mat-list-item><a routerLink="/summary" (click)="loadService($event, subitem.CATID, subitem.ID)">{{subitem.NAME}}</a></mat-list-item>
And here's the code from Left-Menu-Component.ts:
// TypeScript code here
The Summary-Component HTML code:
//HTML code for SummaryComponent
The corresponding TypeScript code for the SummaryComponent:
// TypeScript code for SummaryComponent
Lastly, the component-service.ts file:
// Code from component-service.ts
And the rest-service.ts file:
// Code from rest-service.ts
No errors reported, only the functionality not working as expected with just one click.