Обработка вкладок в Angular

Question

Я сталкиваюсь с немного запутанной обработкой вкладок в угловых.Здесь есть одна базовая вкладка, под базовой вкладкой есть один раскрывающийся список, и в раскрывающемся списке находятся две вкладки действий пользователя.Здесь подразумевается, что базовая вкладка является фиксированной, и когда пользователь выбирает какую-либо одну вкладку действий пользователя из выпадающего меню, эта вкладка должна открываться рядом с базовой вкладкой.Теперь в первый раз, когда пользователь выбирает действие пользователя, эта вкладка открывается, и содержимое этой конкретной вкладки также попадает на эту вкладку.

Но проблема здесь во второй раз, когда пользователь выбирает второе действие пользователя, это второе действие пользователявкладка находится рядом с базовой вкладкой, но содержимое этой вкладки добавляется к нижней части первой вкладки (базовой вкладки).Если мы нажмем вторую вкладку вручную, то содержимое перейдет на вторую вкладку.Если щелкнуть вкладку, содержимое не перейдет на вторую вкладку.В чем может быть проблема этого вопроса.Я использую углеродные вкладки.

Это мой шаблон класса:

<tabs>
<div *ngIf="basetab">
<tab heading="Base tab" [active] ="basetab">
     <base-tab (showPTabs) = "handleTabs($event)"></base-tab>  
</tab>   
</div>
<div *ngIf="firstusertab">
<tab heading="First user tab" [active] ="firstusertab">
    <first-user-tab (showTabs) = "handleTabs($event)"></first-user-tab> 
</tab>   
</div>
<div *ngIf="secondusertab">
<tab heading="Second user tab" [active] ="second user tab">
     <second-user-tab (showTabs) = "handleTabs($event)" ></second-user-tab>
</tab>   
</div>
</tabs>

Это мой компонент:

export class SampleComponent implements OnInit {

    baseTab = false;
    firstuseraction;
    seconduseraction;
    activateTab;

  constructor( private sampleService: SampleService) {
  }


  ngOnInit() {
    if (this.sampleService.baseClicked) {
        this.baseTab = true;
        this.activateTab = true;
        this.firstuseraction = false;
        this.seconduseraction = false;
    }
 }

  handleTabs(data) {
    if (data === 'firstuseraction') {
      this.firstuseraction = true;
      this.seconduseraction = false;
      this.activateTab = false;
    } else if (data === 'seconduseraction') {
      this.seconduseraction = true;
      this.firstuseraction = false;
      this.activateTab = false;
    }
  }
}