TabPanel not Being Generated in Time

Question

I have a TabView (PrimeNG) that one of the TabPanels is only enabled when an specific option is selected by the user. And what's happening is that the TabView is switched before this specific TabPanel is generated(I think so), so it jumps over this tab. If I go back to the previous Tab and go forward again, then the correct Panel is presented.

 <div class="dialog-form" style="width: 100%;">
  <p-tabView [activeIndex]="selectedTab" *ngIf="slingConfig">

<p-tabPanel [disabled]="!pageControl || pageControl[selectedTab] !== 'data-cliente'">
  <ng-template pTemplate="header">
    <fa-icon [icon]="'ship'"></fa-icon>&nbsp;
    {{ 'SLING-DATA' | translate }}
  </ng-template>
  <ng-template pTemplate="content">
    <app-movement-data
      *ngIf="isNew || movementPlan?.id"
      [movementPlan]="movementPlan"
      [slingConfig]="slingConfig"
      [isNew]="isNew"
      (cancelPageEvent)="cancel()"
      (finishEvent)="nextPage($event)">
    </app-movement-data>
  </ng-template>
</p-tabPanel>

<p-tabPanel *ngIf="objectives" [disabled]="!pageControl || pageControl[selectedTab] !== 'objective'">
  <ng-template pTemplate="header">
    <fa-icon [icon]="'route'"></fa-icon>&nbsp;
    {{ 'Objetivo' | translate }}
  </ng-template>
  <ng-template pTemplate="content">
    <app-movement-plan-objectives-form
      *ngIf="isNew || movementPlan?.id"
      [movementPlan]="movementPlan"
      [isNew]="isNew"
      [objectives]="objectives"
      (backPageEvent)="previouPage()"
      (cancelPageEvent)="cancel()"
      (finishEvent)="nextPageSelectObjective($event)">
    </app-movement-plan-objectives-form>
  </ng-template>
</p-tabPanel>

<p-tabPanel *ngFor="let quest of objectiveSelected?.questionnaires; let i = index" [disabled]="!pageControl || pageControl[selectedTab] !== 'q'+i"> // this is the tab that is being jumped over...
  <ng-template pTemplate="header">// this is the tab that is being jumped over...
    <fa-icon [icon]="'question'"></fa-icon>&nbsp;// this is the tab that is being jumped over...
    {{ quest.title | translate }}
  </ng-template>
  <ng-template pTemplate="content">
    <app-movement-plan-objective-questionnaire// this is the tab that is being jumped over...
      *ngIf="isNew || movementPlan?.id"
      [movementPlan]="movementPlan"
      [isNew]="isNew"
      [questionnaire]="quest"
      (backPageEvent)="previouPage()"// this is the tab that is being jumped over...
      (cancelPageEvent)="cancel()"
      (finishEvent)="nextPageFromQuestionnaire($event, true)">
    </app-movement-plan-objective-questionnaire>
  </ng-template>
</p-tabPanel>

<p-tabPanel [disabled]="!pageControl || pageControl[selectedTab] !== 'navigation-plan'">
  <ng-template pTemplate="header">
    <fa-icon [icon]="'map'"></fa-icon>&nbsp;
    {{ 'Aviso de Saída' | translate }}
  </ng-template>
  <ng-template pTemplate="content">
    <app-movement-navigation-plan
      *ngIf="isNew || movementPlan?.id"
      [movementPlan]="movementPlan"
      [isNew]="isNew"
      [hasNavigationPlan]="objectiveSelected?.hasNavigationPlan"
      [slingConfig]="slingConfig"
      (backPageEvent)="previouPage()"
      (cancelPageEvent)="cancel()"
      (finishEvent)="nextPage($event)">
    </app-movement-navigation-plan>
  </ng-template>
</p-tabPanel>

Functions:

    nextPage(obj: any) {
    this.movementPlan = { ...this.movementPlan, ...obj };
    if (this.pageControl.length - 1 === this.selectedTab) {
      this.save();
    } else {
        this.selectedTab++;
    }
  }

  nextPageFromQuestionnaire(obj: {
    questionnaireCode: string;
    answerCode: string;
  }) {
    let answers: any[] = this.movementPlan?.questionnairesAnswer;
    if (answers) {
      const a = answers.filter(
        (item) => item.questionnaireCode === obj.questionnaireCode
      );
      if (a.length == 1) {
        a[0].answerCode = obj.answerCode;
      } else {
        answers.push(obj);
      }
    } else {
      answers = [obj];
    }
    if (
      this.movementPlan.questionnairesAnswer[0].answerCode ===
      'DestinationNavigation'
    ) {
      this.objectiveSelected = {
        ...this.objectiveSelected,
        hasNavigationPlan: true,
      };
    }
    this.nextPage({ questionnairesAnswer: answers });
  }

  nextPageSelectObjective(obj: { objectiveCode: string }) {
    this.objectiveSelected = this.objectives.filter(
      (o) => o.code === obj.objectiveCode
    )[0];
    if (this.isNew) {
      this.movementPlan.questionnairesAnswer = [];
      this.createQuestionnaireTabFromObjective();
    }
    this.nextPage(obj);
  }

  createQuestionnaireTabFromObjective() {
    this.pageControl = ['data-cliente', 'objective'];
    this.objectiveSelected.questionnaires.forEach((v, index) =>
      this.pageControl.push('q' + index)
    );
    this.pageControl.push('navigation-plan');
  }