Angular 4 Semantic UI Tabs only work after i click on them

Question

I have some semantic UI tabs set up in my app.component.html like this:

<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>

The tabs seem not to show when i first open the page, and are empty, but when i click on the specific tab the content seems to start showing one by one as if it needs time to load but only after i click on that specific tab, if I don't do that nothing shows, and I would like to see the contenst on initialization (immediately when i open the page on the tab that's set to beeing active first)

I instantiated the tabs in app.component.ts like this

export class AppComponent implements OnInit{
 ngOnInit(): void {
    $('.menu .item').tab();
  }

  public onQuestionCreated(question: Question): void {
    this.questions.push(question);
  }
}

Wrote the above and i can't seem to work out how to fix the problem

Answer 1

I never worked with Semantic UI before, but can you try to remove "right" from the class in "User Profile" as shown below

<a style = "font-size: large;" class="item" data-tab="dtUserProfile">User profile</a>

Also looking at the docs I found out that the class for the active tab should be as shown below

<div class="ui bottom attached active tab segment" data-tab="dtQuestions">
    <app-question-list [questions]="questions"></app-question-list>
</div>  

Hope any of the above two options helps.