How to use Angular Bootstrap Tab inside Angular Bootstrap Modal

I am trying to place Angular bootstrap Tab inside Angular bootstrap Modal, The thing is, Angular doesn't allow to render ng-template inside ng-template, so Angular bootstrap tab contents are not showing inside Angular bootstrap tab.

Here is the code for modal and tabs

<button
    type="button"
    class="btn btn-primary"
    (click)="openModal(el, modal)" 
>
    config
</button>

<ng-template
    #modal
    let-modal
    let-c="close"
    let-d="dismiss"
>
<ul
    ngbNav
    #nav="ngbNav"
    [(activeId)]="activeTab"
    class="nav-tabs"
>
<li [ngbNavItem]="1">
    <a ngbNavLink>First</a>
    <ng-template NgbNavContent>
        <p>This is first tab</p>
    </ng-template>
</li>
<li [ngbNavItem]="2">
    <a ngbNavLink>Second</a>
    <ng-template NgbNavContent>
        <p>This is second tab</p>
    </ng-template>
</li>

All I want to know if there is a way to find out to place bootstrap tabs inside bootstrap modal

Thanks in advance