Angular 10 PrimeNG | Cannot assign value "XXXX" to template variable "activeTabIndex". Template variables are read-only

Question

I have create one html component to create tabs using template to render the html, but here I want to make active specific tab from my code. I am using template because same templet is being used be other module as well. you can see I am creating tabs dynamically, I want to make specific tab active programmatically ,

<p-accordionTab header="{{moduleTitle || 'Check List'}}" [selected]="true">
    <ng-container *ngTemplateOutlet="checklistsTemplate"></ng-container>
</p-accordionTab>
<ng-template #checklistsTemplate>
    <div class="row">
        <div class="mb-5 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <ng-container *ngIf="sectionsOnTab && sectionsOnTab.Sections?.length">
                <ng-container [ngTemplateOutlet]="renderTab"
                    [ngTemplateOutletContext]="{sections:sectionsOnTab.Sections, activeTabIndex:sectionsOnTab.activeTabIndex}">
                </ng-container>
            </ng-container>

            <ng-container *ngIf="sectionsOnModules && sectionsOnModules.length">
                <ng-container *ngFor="let section of sectionsOnModules">
                    <ng-container *ngIf="!section.SectionsOnTab || !section.SectionsOnTab.Sections?.length"
                        [ngTemplateOutlet]="renderModule" [ngTemplateOutletContext]="{section:section}">
                    </ng-container>
                    <ng-container *ngIf="section.SectionsOnTab && section.SectionsOnTab.Sections?.length"
                        [ngTemplateOutlet]="renderTab"
                        [ngTemplateOutletContext]="{sections:section.SectionsOnTab.Sections, activeTabIndex:section.SectionsOnTab.activeTabIndex}">
                    </ng-container>
                </ng-container>
            </ng-container>
        </div>
    </div>
</ng-template>

<ng-template #renderTab let-sections="sections" let-activeTabIndex="activeTabIndex">
    <nb-card *ngIf="sections.length > 0">
        <p-tabView [(activeIndex)]="activeTabIndex">
            <p-tabPanel *ngFor="let section of sections; index as i">
                <ng-template pTemplate="header">
                    Header
                </ng-template>

                Content
            </p-tabPanel>
        </p-tabView>
    </nb-card>
</ng-template>

<ng-template #renderModule let-section="section">
    <nb-card>
        <nb-card-header>
            Header
        </nb-card-header>
        <nb-card-body>
            Content
        </nb-card-body>
    </nb-card>
</ng-template>