I've been trying to solve a persistent issue without success. The problem involves the interaction between three key elements: the HeaderComponent, TabChangingService, and TabsComponent. Within the HeaderComponent, there are three buttons, each with a specific click method as shown below:
click(tab: number) {
this.tabChangingService.changeTab(tab);
this.router.navigate(['/tabs'])
}
Additionally, in the ngOnInit method of the TabsComponent, the following code is present:
ngOnInit() {
this.tabChangingService.tab.pipe(
tap(tab => this.tab = tab),
tap(tab => console.log('setting tab ', tab) // added this linte
).subscribe();
}
The template contains the switch case for displaying content based on selected tabs:
<ng-container [ngSwitch]="tab">
<div id="tab1" *ngSwitchCase="0">content...</div>
<div id="tab2" *ngSwitchCase="1">content...</div>
</ng-container>
Furthermore, here is the code snippet from the TabChangingService:
export class TabChangingService {
private _tab = new Subject<number>();
constructor() {
}
public changeTab(tab: number) {
console.log('Changing to tab ', tab); // added this line
this._tab.next(tab);
}
public get tab() {
return this._tab;
}
}
The issue arises when clicking a button on the header – the tab does not get selected until the second click. This behavior could be attributed to the component's mounting delay upon first click. If you have any insights or suggestions, I would greatly appreciate your help. Thank you!
EDIT
Upon the first click on a header button, "Changing tab" is printed but "Setting tab" is absent until the second click.