Как загрузить компонент условно в угловую по нажатию кнопки

Question

Я очень плохо знаком с Angular.

Я хочу условно загрузить дочерний компонент внутри компонента, нажав кнопку. При нажатии кнопки он должен повторно визуализировать соответствующий дочерний компонент.

HTML код

<div class="tab">
  <button class="tablinks" (click)="onTabClick('0')">Transmit</button>
  <button class="tablinks" (click)="onTabClick('1')">Published</button>
  <button class="tablinks" (click)="onTabClick('2')">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

TS файл

tabIndex = 2 ;


  onTabClick(index){
        this.tabIndex = index;
   }

Answer 1

вы передали строку в качестве аргумента, но проверяете числа в таб.Вы можете проверить ссылку на stackblitz:

проверить ссылку stackblitz здесь

<div class="tab">
  <button class="tablinks" (click)="onTabClick(0)">Transmit</button>
  <button class="tablinks" (click)="onTabClick(1)">Published</button>
  <button class="tablinks" (click)="onTabClick(2)">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

Answer 2

вы передаете параметры 0,1,2 как строки и проверяете условие с помощью === это также проверяет тип (означает жало или число)

решения

1. place == вместо ===
   (или)
2. изменить аргументы '1' на 1, '2' на 2

Answer 3

Вы передаете 0,1,2 как строку в onTabClick (), тогда как в файле .ts у вас есть tabIndex как целое число.