Skip to main content

angular bootstrap - Prevent selecting a tab in Nav

app.component.ts 

import { Component } from '@angular/core';
import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';

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


export class AppComponent {
  onNavChange(changeEvent: NgbNavChangeEvent) {
    if (changeEvent.nextId === 'kotlin') {
      changeEvent.preventDefault();
    }
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Prevent selecting a tab in Nav
</h4>


<ul ngbNav #nav="ngbNav" class="nav-tabs" (navChange)="onNavChange($event)">
  
  <li ngbNavItem="android">
    <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="kotlin">
    <a ngbNavLink>Kotlin [Can't Select]</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="java">
    <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>
More Angular tutorials
Labels: