(nzSelectChange) does not react at the first click

Hello I need to call a component just after of make click in a tab, so I’m using an funcion in my ts code

html:

<div class="card-container">
    <nz-tabset (nzSelectChange)="mFunction2($event)" nzType="card">
      <nz-tab [nzTitle]="titleTemplateTaskToday">
        <ng-template #titleTemplateTaskToday>
          <i nz-icon nzType="unordered-list"></i>
          Pendientes para hoy
        </ng-template>
        <app-task></app-task>
      </nz-tab>
        <nz-tab [nzTitle]="titleTemplateCalendar">
          <ng-template #titleTemplateCalendar>
            <i nz-icon nzType="calendar"></i>
          </ng-template>
          <app-mytasks *ngIf="loadComponent == true" class=""></app-mytasks>
        </nz-tab>
        <nz-tab [nzTitle]="titleTemplate">
          <ng-template #titleTemplate>
            <i nz-icon nzType="unordered-list"></i>
            Tareas
          </ng-template>
          <!-- start drag & drop -->
    
    
          <div class="row">
              <div class="col-4">
                <h2>To do</h2>
          
                <div
                  cdkDropList
                  #todoList="cdkDropList"
                  [cdkDropListData]="todo"
                  [cdkDropListConnectedTo]="[doneList,processList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                <nz-card class="m-1" id="todo" *ngFor="let item of todo" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template>
                  <!-- <div id="todo" class="example-box" *ngFor="let item of todo" cdkDrag>
                    {{item}}
                  </div> -->
                </div>
              </div>

              <div class="col-4">
                <h2>Done</h2>
                <div
                  cdkDropList
                  #doneList="cdkDropList"
                  [cdkDropListData]="done"
                  [cdkDropListConnectedTo]="[todoList,processList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                  <!-- <div id="done" class="example-box" *ngFor="let item of done" cdkDrag>
                    {{item}}
                  </div> -->
                <nz-card class="m-1" id="done" *ngFor="let item of done" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <!-- <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template> -->
                </div>
              </div>

              <div class="col-4">
                <h2>Process</h2>
                <div
                  id="containerProcess"
                  cdkDropList
                  #processList="cdkDropList"
                  [cdkDropListData]="process"
                  [cdkDropListConnectedTo]="[todoList,doneList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                  <!-- <div id="process" class="example-box" *ngFor="let item of process" cdkDrag>
                    {{item}}
                  </div> -->
                  <nz-card class="m-1" id="process" *ngFor="let item of process" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <!-- <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template> -->
                </div>
              </div>
          </div>
          
          <!-- end drag & drop -->
        </nz-tab>
    </nz-tabset>
</div>

My ts code:

 loadComponent;
    mFunction2(e: {index: number, tab: NzTabComponent}){
      if ( e.index == 1 ){
       this.loadComponent = true;
      }
    }

For some reason, it does not react at the first click and I don’t know why, in another words, I charge the page and the first time that i make click in the tab with index 1, it does not load, but if I click twice it load correctly, so how can I fix it?

Source: Angular Questions