Skip to main content

angular bootstrap - How to show vertical pills in a Nav

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  active = 'angular';
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to show vertical pills in Nav
</h4>


<div class="d-flex">
  <ul ngbNav #nav="ngbNav" [(activeId)]="active"
    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>


<b>Active: {{ active }}</b>
More Angular tutorials
Labels: