tessl/npm-ng-bootstrap--ng-bootstrap

Angular powered Bootstrap UI component library with comprehensive Bootstrap 5 components for Angular applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Navigation Components

Name: tessl/npm-ng-bootstrap--ng-bootstrap
Author: tessl

Flexible navigation components supporting tabs, pills, custom layouts, and dynamic content. Perfect for organizing content into navigable sections with keyboard and mouse support.

Core Imports

import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';

Capabilities

NgbNav

Main navigation container component that manages navigation items and content.

@Component({
  selector: '[ngbNav]',
  exportAs: 'ngbNav'
})
class NgbNav {
  /** Currently active navigation item ID */
  @Input() activeId: any;
  
  /** Enable/disable animations for content switching */
  @Input() animation: boolean;
  
  /** If true, content is removed from DOM when not active */
  @Input() destroyOnHide: boolean;
  
  /** Navigation orientation */
  @Input() orientation: 'horizontal' | 'vertical';
  
  /** ARIA roles ('tablist' or false to disable) */
  @Input() roles: 'tablist' | false;
  
  /** Event emitted when active ID changes */
  @Output() activeIdChange: EventEmitter<any>;
  
  /** Event emitted before navigation change */
  @Output() navChange: EventEmitter<NgbNavChangeEvent>;
  
  /** Programmatically select a navigation item */
  select(id: any): void;
}

NgbNavItem

Individual navigation item directive.

@Directive({
  selector: '[ngbNavItem]',
  exportAs: 'ngbNavItem'
})
class NgbNavItem {
  /** Unique identifier for the navigation item */
  @Input() id: any;
  
  /** If true, prevents the item from being selected */
  @Input() disabled: boolean;
  
  /** If true, content is removed from DOM when not active */
  @Input() destroyOnHide: boolean;
  
  /** ARIA role for the navigation item */
  @Input() role: string;
  
  /** Check if this item is currently active */
  readonly active: boolean;
}

NgbNavContent

Content area for navigation items.

@Directive({
  selector: '[ngbNavContent]'
})
class NgbNavContent {}

NgbNavLink

Navigation link directive.

@Directive({
  selector: 'a[ngbNavLink]',
  exportAs: 'ngbNavLink'
})
class NgbNavLink extends NgbNavLinkBase {}

NgbNavLinkButton

Navigation button directive.

@Directive({
  selector: 'button[ngbNavLink]',
  exportAs: 'ngbNavLink'
})
class NgbNavLinkButton extends NgbNavLinkBase {}

NgbNavLinkBase

Base class for navigation links.

@Directive()
abstract class NgbNavLinkBase {
  /** If true, this link is disabled */
  @Input() disabled: boolean;
  
  /** ARIA role for the link */
  @Input() role: string;
  
  /** ARIA controls attribute */
  @Input() ariaControls: string;
  
  /** Tab index for keyboard navigation */
  @Input() tabindex: number;
}

NgbNavOutlet

Outlet component that displays the content of the active navigation item.

@Component({
  selector: '[ngbNavOutlet]',
  exportAs: 'ngbNavOutlet'
})
class NgbNavOutlet {}

NgbNavPane

Content pane for navigation items.

@Directive({
  selector: '[ngbNavPane]'
})
class NgbNavPane {
  /** Navigation item this pane belongs to */
  item: NgbNavItem;
  
  /** Navigation instance */
  nav: NgbNav;
  
  /** ARIA role for the pane */
  role: string;
}

NgbNavItemRole

Role directive for navigation items.

@Directive({
  selector: '[ngbNavItemRole]'
})
class NgbNavItemRole {
  /** ARIA role */
  @Input() role: string;
}

NgbNavConfig

Configuration service for setting default navigation behavior.

@Injectable({ providedIn: 'root' })
class NgbNavConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default destroyOnHide setting */
  destroyOnHide: boolean;
  
  /** Default orientation */
  orientation: 'horizontal' | 'vertical';
  
  /** Default roles setting */
  roles: 'tablist' | false;
}

Event Interfaces

interface NgbNavChangeEvent {
  /** Currently active item ID */
  activeId: any;
  
  /** Next item ID to be activated */
  nextId: any;
  
  /** Prevent the navigation change */
  preventDefault: () => void;
}

interface NgbNavContentContext {
  /** The navigation item */
  $implicit: NgbNavItem;
}

Usage Examples

Basic Navigation Tabs

@Component({
  template: `
    <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
      <li [ngbNavItem]="1">
        <button ngbNavLink>First Tab</button>
        <ng-template ngbNavContent>
          <p>This is the content for the first tab.</p>
        </ng-template>
      </li>
      
      <li [ngbNavItem]="2">
        <button ngbNavLink>Second Tab</button>
        <ng-template ngbNavContent>
          <p>This is the content for the second tab.</p>
        </ng-template>
      </li>
      
      <li [ngbNavItem]="3" [disabled]="true">
        <button ngbNavLink>Disabled Tab</button>
        <ng-template ngbNavContent>
          <p>This content won't be shown.</p>
        </ng-template>
      </li>
    </ul>
    
    <div [ngbNavOutlet]="nav" class="mt-3"></div>
  `
})
export class BasicNavComponent {
  activeId = 1;
}

Navigation Pills

@Component({
  template: `
    <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills">
      <li [ngbNavItem]="'home'">
        <a ngbNavLink>Home</a>
        <ng-template ngbNavContent>
          <h4>Home Content</h4>
          <p>Welcome to the home section.</p>
        </ng-template>
      </li>
      
      <li [ngbNavItem]="'profile'">
        <a ngbNavLink>Profile</a>
        <ng-template ngbNavContent>
          <h4>Profile Content</h4>
          <p>Your profile information goes here.</p>
        </ng-template>
      </li>
    </ul>
    
    <div [ngbNavOutlet]="nav" class="mt-3"></div>
  `
})
export class PillNavComponent {
  activeId = 'home';
}

Vertical Navigation

@Component({
  template: `
    <div class="row">
      <div class="col-3">
        <div ngbNav 
             #nav="ngbNav" 
             [(activeId)]="activeId" 
             orientation="vertical"
             class="nav-pills flex-column">
          <div [ngbNavItem]="1">
            <button ngbNavLink>Section 1</button>
            <ng-template ngbNavContent>
              <h5>Section 1</h5>
              <p>Content for section 1.</p>
            </ng-template>
          </div>
          
          <div [ngbNavItem]="2">
            <button ngbNavLink>Section 2</button>
            <ng-template ngbNavContent>
              <h5>Section 2</h5>
              <p>Content for section 2.</p>
            </ng-template>
          </div>
        </div>
      </div>
      
      <div class="col-9">
        <div [ngbNavOutlet]="nav"></div>
      </div>
    </div>
  `
})
export class VerticalNavComponent {
  activeId = 1;
}

Dynamic Navigation

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="addTab()">
        Add Tab
      </button>
      <button class="btn btn-danger" (click)="removeTab()">
        Remove Last Tab
      </button>
    </div>
    
    <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
      <li *ngFor="let tab of tabs" [ngbNavItem]="tab.id">
        <button ngbNavLink>{{ tab.title }}</button>
        <ng-template ngbNavContent>
          <p>{{ tab.content }}</p>
        </ng-template>
      </li>
    </ul>
    
    <div [ngbNavOutlet]="nav" class="mt-3"></div>
  `
})
export class DynamicNavComponent {
  activeId = 1;
  tabs = [
    { id: 1, title: 'Tab 1', content: 'Content for tab 1' },
    { id: 2, title: 'Tab 2', content: 'Content for tab 2' }
  ];
  
  private nextId = 3;
  
  addTab() {
    this.tabs.push({
      id: this.nextId,
      title: `Tab ${this.nextId}`,
      content: `Content for tab ${this.nextId}`
    });
    this.activeId = this.nextId;
    this.nextId++;
  }
  
  removeTab() {
    if (this.tabs.length > 1) {
      const removedTab = this.tabs.pop();
      if (this.activeId === removedTab.id) {
        this.activeId = this.tabs[this.tabs.length - 1].id;
      }
    }
  }
}

Navigation with Custom Content

@Component({
  template: `
    <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
      <li [ngbNavItem]="'form'">
        <button ngbNavLink>
          <i class="bi bi-person-fill me-1"></i>
          User Form
        </button>
        <ng-template ngbNavContent>
          <form>
            <div class="mb-3">
              <label for="username">Username:</label>
              <input type="text" class="form-control" id="username">
            </div>
            <div class="mb-3">
              <label for="email">Email:</label>
              <input type="email" class="form-control" id="email">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </ng-template>
      </li>
      
      <li [ngbNavItem]="'list'">
        <button ngbNavLink>
          <i class="bi bi-list-ul me-1"></i>
          Items List
        </button>
        <ng-template ngbNavContent>
          <ul class="list-group list-group-flush">
            <li class="list-group-item" *ngFor="let item of items">
              {{ item }}
            </li>
          </ul>
        </ng-template>
      </li>
    </ul>
    
    <div [ngbNavOutlet]="nav" class="mt-3"></div>
  `
})
export class CustomContentNavComponent {
  activeId = 'form';
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
}