How to create a dynamic Nav using NgbNavModule and ng-content dynamic?

Question

I am trying to create a dynamic navigation with NgbNavModule that can receive child components in the ngbNavContent, I am trying to use ng-content but I am not able to achieve it, I am not able to do it using ngTemplateOutlet either

parent-ts

items = [{title: "secondTitle",navName: "test-first"},
      {title: "firstTitle", navName: "test-second"}];

parent-html

<generic-component [items]="items">
  <ng-container test-first>
    <first-child-component> </first-child-component>
  </ng-container>
  <ng-container test-second>
    <second-child-component> </second-child-component>
  </ng-container>
</generic-component>

generic-component-ts:

@Input() items;

generic-component-html:

<ul ngbNav #navDirectDebitPayment="ngbNav" 
  [activeId]="1"
  [destroyOnHide]="false">
  <ng-container *ngFor="let item of items; let i=index">
    <li [ngbNavItem]="i + 1">
      <a ngbNavLink>
        {{item.title}}
      </a>
      <ng-template ngbNavContent>
        <ng-content select="[id=item.navName]"></ng-content>
      </ng-template>
    </li>
  </ng-container>
</ul>
<div [ngbNavOutlet]="navDirectDebitPayment"></div>