Skip to main content

angular bootstrap - How to use Nav without ul li

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to use Nav without ul li
</h4>


<nav ngbNav #nav="ngbNav" class="nav-tabs">
  <ng-container ngbNavItem>
    <a ngbNavLink>Angular</a>
    <ng-template ngbNavContent>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        In egestas felis eget nisi porttitor, et faucibus est interdum.
      </p>
    </ng-template>
  </ng-container>
  <ng-container ngbNavItem>
    <a ngbNavLink>React</a>
    <ng-template ngbNavContent>
      <p>
        Vivamus nec enim vel metus sodales hendrerit.
        Curabitur imperdiet condimentum eleifend.
        Integer diam tortor, dapibus eget nisi vel, vestibulum varius quam.
      </p>
    </ng-template>
  </ng-container>
  <ng-container ngbNavItem>
    <a ngbNavLink>Vue</a>
    <ng-template ngbNavContent>
      <p>
        Proin ultrices urna fermentum quam porttitor interdum.
        Phasellus id erat elit. Morbi et bibendum est.
        Mauris nec fermentum eros, id facilisis orci.
        Donec luctus consectetur tortor sed malesuada.
      </p>
    </ng-template>
  </ng-container>
</nav>

<div [ngbNavOutlet]="nav" class="mt-2"></div>
More Angular tutorials
Labels: