O helper de nav entrega seleção controlada, outlet desacoplado, suporte a abas desabilitadas e atalhos de teclado como Home, End e setas.

Descrição

Use liNav no container, liNavItem nas abas, liNavLink no gatilho e liNavOutlet para renderizar o conteúdo ativo em qualquer parte da página.

Recursos

activeId com binding e seleção programática.
navChange.preventDefault() para bloquear trocas específicas.
Suporte a nav horizontal, vertical e outlet fora do markup principal.

Limitações

O demo cobre o fluxo essencial, não animação complexa.
O conteúdo é renderizado a partir de template[liNavContent].
Para navegação com URL, continue usando router normalmente.

Basic navs

A seleção abaixo usa [(activeId)] e mantém o outlet fora da lista.

Vertical pills

Com orientation="vertical" o nav se comporta como uma coluna de pills.

Estado atual

{{ eventLog }}

A API pública segue a divisão clássica de container, item, link, conteúdo e outlet.

liNav controla estado, teclado, roles e eventos.
liNavItem define id, estado disabled e destroyOnHide por item.
liNavLink aplica classes Bootstrap e atributos ARIA no botão ou link.
template[liNavContent] descreve o conteúdo da aba.
[liNavOutlet] renderiza o conteúdo ativo em outro ponto do DOM.

<ul liNav #nav="liNav" class="nav nav-tabs" [(activeId)]="activeId">
  <li [liNavItem]="1">
    <button liNavLink>First</button>
    <template liNavContent>First content</template>
  </li>
  <li [liNavItem]="2">
    <button liNavLink>Second</button>
    <template liNavContent>Second content</template>
  </li>
</ul>

<div [liNavOutlet]="nav"></div>

<div
  liNav
  orientation="vertical"
  keyboard="changeWithArrows"
  [activeId]="verticalActiveId"
  (activeIdChange)="verticalActiveId = $event">
  <div liNavItem="overview">
    <button liNavLink>Overview</button>
    <template liNavContent>...</template>
  </div>
</div>