I have set up semantic UI tabs in my app.component.html as shown below:
<div class = "ui container">
<h1>Header/h1>
<hr>
<div style = "background-color: rgb(194, 221, 240);" class="ui top attached tabular menu">
<a style = "font-size: large;" class="item active" data-tab="dtQuestions">Questions</a>
<a style = "font-size: large;" class="item" data-tab="dtAddNewQuestion">Add new question</a>
<a style = "font-size: large;" class="right item" data-tab="dtUserProfile">User profile</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="dtQuestions">
<app-question-list [questions]="questions"></app-question-list>
</div>
<div class="ui bottom attached tab segment" data-tab="dtAddNewQuestion">
<app-create-question (questionCreated)="onQuestionCreated($event)"></app-create-question>
</div>
<div class="ui bottom attached tab segment" data-tab="dtUserProfile">
<app-user-profile></app-user-profile>
</div>
</div>
After loading the page, the tabs do not display initially and appear empty. However, upon clicking on a specific tab, the content gradually starts to show as if it requires time to load. I would like the contents to be visible immediately after opening the page, especially on the initially active tab.
To initialize the tabs in app.component.ts, I used the following code snippet:
export class AppComponent implements OnInit {
ngOnInit(): void {
$('.menu .item').tab();
}
public onQuestionCreated(question: Question): void {
this.questions.push(question);
}
}
I have written the above code but am unable to resolve the issue. Any guidance on how to fix this problem would be greatly appreciated.