Skip to main content

angular bootstrap - How to enable disable tab in 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:String = 'java';
  isDisabled:boolean = false;

  toggleDisabled() {
    this.isDisabled = !this.isDisabled;
    if (this.isDisabled && this.active == 'kotlin') {
      this.active = 'java';
    }
  }
}
app.component.html 

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


<ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="active">
  
  <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" [disabled]="isDisabled">
    <a ngbNavLink>Kotlin [{{isDisabled? 'Disabled':'Enabled'}}]</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>

<button 
  class="btn btn-sm mt-2 {{isDisabled? 'btn-success' : 'btn-danger'}}"
  (click)="toggleDisabled()">
    {{isDisabled? 'Enable' : 'Disable'}} Kotlin
</button>
More Angular tutorials
Labels: