Skip to main content

angular bootstrap - How to use 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 = 1;
}
app.component.html 

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


<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Android</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]="2">
    <a ngbNavLink>Kotlin</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]="3">
    <a ngbNavLink>Java</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="mt-2"></div>

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