Saturday, August 29, 2020

Angular

 TabSet

      <div>

        <ngb-tabset type="pills">

        <ngb-tab *ngFor="let day of itineraryFromProduct.productObject.ItineraryDays; let i = index" title="Day {{day.fields.SortOrder.value}}">         

              <ng-template ngbTabContent>

                <p>Day {{day.fields.SortOrder.value}}</p>

                <p>{{day.fields.Description.value}}</p>

              </ng-template>

            </ngb-tab>

        </ngb-tabset>

        </div>


    </div>

NgbNav



<div class="d-flex">

      <div class="row">

      <div class="col-4">

      <ul ngbNav #nav="ngbNav" class="nav-pills" orientation="vertical">

        <li ngbNavItem *ngFor="let day of itineraryFromProduct.productObject.ItineraryDays; let i = index">      

          <a ngbNavLink> Day {{day.fields.SortOrder.value}}</a>

          <ng-template ngbNavContent>

            <p>{{day.fields.Description.value}}</p>

          </ng-template>

        </li>       

      </ul>

      </div>

      <div class="col-8">

          <div [ngbNavOutlet]="nav" class="ml-4"></div>

      </div>

      </div>

  </div>




No comments:

Post a Comment