The active tab, according to your code, is determined by the value of activeTab: [ngClass]="{ active: activeTab === 'transcript' }". So, make sure its value is 'summary' and not 'transcript'.
#Hi, How can I default the tab to `Summary` upon opening?
vital hatch
reef axle
why is it defaulting to Transcription?
vital hatch
Because the value of activeTab is 'transcript'. That's what makes the transciption tab the active one. Do you understand what [ngClass]="{ active: activeTab === 'transcript' }" does?
One has [ngClass]="{ active: activeTab === 'transcript' }". The other has [ngClass]="{ active: activeTab === 'summary' }". Do you see that there is a difference? Do you understand what does?
reef axle
yes, transcript and summary is set to activeTab
how does the app know which one is the active tab?
sorry for being so dumb here
vital hatch
No, not at all. What [ngClass]="{ active: activeTab === 'transcript' }" does is that it adds the CSS class 'active' to the element if the condition activeTab === 'transcript' is true. And it removes it if the condition activeTab === 'transcript' is false. So, if the Transciption tab is the one which has the 'active' class, it's because the value of activeTab is 'transcript'.
You want the Summary tab to be the active one. It's active if activeTab has the value 'summary'. So you need to initialize activeTab to 'summary' instad of 'transcript'.
reef axle
upon clicking, activeTab is set to true
but how about when i open the modal?
it continues to default to Transcript
oh wait i see
vital hatch
No. First, upon clicking, activeTab is not set to true. Read the (click)="..." parts. Not one of them sets it to true.
And *ngIf="expression" would remove the element from the dom is the expression was false. It's not removed, is it? Again, the active tab is Transcription because activeTab has the value 'transcript'. If you want the summary tab to be active, then you need to set activeTab to 'summary'. In the TypeScript code.
reef axle
i just want to to default to Summary for all cases
vital hatch
If you always want it to be summary (which is quite strange since, as you've shown before, this tab is sometimes absent from the page), then all you need is
private setActiveTab(): void {
this.activeTab = 'summary';
}
You can do whatever you want. Write the code so that it does what you want. But before doing that, maybe you should see with the person who wrote that code originally, because it seems you're about to change the behavior significantly without really understanding what the code is doing. There's probably a good reason for that code to exist and do what it does the way it does.
reef axle
how can i integrate setting the activeTab to summary in the original function?
vital hatch
If you don't know when it should be set to summary and when it should be set to something else, then you can't. That's why I advised you to talk with the people in your team. You need to understand what the code does and what it should do before trying to modify it.