Skip to main content

angular bootstrap - Select Nav tab on button click

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Select Nav tab on button click
</h4>


<div class="d-flex mb-2">
  <ul ngbNav #nav="ngbNav" class="nav-pills" orientation="vertical">
    
    <li ngbNavItem="angular">
      <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>
    </li>

    <li ngbNavItem="react">
      <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>
    </li>

    <li ngbNavItem="vue">
      <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>
    </li>

  </ul>

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


<button 
  class="btn btn-dark btn-sm m-2"
  (click)="nav.select('angular')">
    Select Angular
</button>

<button 
  class="btn btn-dark btn-sm m-2"
  (click)="nav.select('react')">
    Select React
</button>

<button 
  class="btn btn-dark btn-sm m-2" 
  (click)="nav.select('vue')">
    Select Vue
</button>
More Angular tutorials
Labels: