CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

feedback.mddocs/

Feedback Components

User feedback components including toast notifications, tooltips, and popovers for providing contextual information and notifications to users.

Core Imports

import { 
  NgbToastModule, 
  NgbTooltipModule, 
  NgbPopoverModule 
} from '@ng-bootstrap/ng-bootstrap';

Capabilities

NgbToast

Toast notification component for displaying temporary messages.

@Component({
  selector: 'ngb-toast',
  exportAs: 'ngbToast'
})
class NgbToast {
  /** Enable/disable fade animation */
  @Input() animation: boolean;
  
  /** If true, toast will hide automatically after delay */
  @Input() autohide: boolean;
  
  /** Delay in milliseconds before auto-hiding */
  @Input() delay: number;
  
  /** Toast header text */
  @Input() header: string;
  
  /** CSS class for the toast */
  @Input() class: string;
  
  /** Event emitted when toast is hidden */
  @Output() hide: EventEmitter<void>;
  
  /** Programmatically show the toast */
  show(): void;
  
  /** Programmatically hide the toast */
  hide(): void;
}

NgbToastHeader

Header component for toast notifications.

@Component({
  selector: 'ngb-toast-header',
  exportAs: 'ngbToastHeader'
})
class NgbToastHeader {}

NgbTooltip

Tooltip directive for displaying contextual help on hover or focus.

@Directive({
  selector: '[ngbTooltip]',
  exportAs: 'ngbTooltip'
})
class NgbTooltip {
  /** Tooltip content (string or template) */
  @Input() ngbTooltip: string | TemplateRef<any>;
  
  /** CSS class for the tooltip */
  @Input() tooltipClass: string;
  
  /** Tooltip placement */
  @Input() placement: Placement;
  
  /** Events that trigger tooltip (space-separated) */
  @Input() triggers: string;
  
  /** Container element for the tooltip */
  @Input() container: string;
  
  /** If true, tooltip is disabled */
  @Input() disableTooltip: boolean;
  
  /** Delay before showing tooltip */
  @Input() openDelay: number;
  
  /** Delay before hiding tooltip */
  @Input() closeDelay: number;
  
  /** Event emitted when tooltip is shown */
  @Output() shown: EventEmitter<void>;
  
  /** Event emitted when tooltip is hidden */
  @Output() hidden: EventEmitter<void>;
  
  /** Programmatically open the tooltip */
  open(): void;
  
  /** Programmatically close the tooltip */
  close(): void;
  
  /** Toggle tooltip visibility */
  toggle(): void;
  
  /** Check if tooltip is open */
  isOpen(): boolean;
}

NgbPopover

Popover directive for displaying rich content in an overlay.

@Directive({
  selector: '[ngbPopover]',
  exportAs: 'ngbPopover'
})
class NgbPopover {
  /** Popover content (string or template) */
  @Input() ngbPopover: string | TemplateRef<any>;
  
  /** Popover title */
  @Input() popoverTitle: string | TemplateRef<any>;
  
  /** CSS class for the popover */
  @Input() popoverClass: string;
  
  /** Popover placement */
  @Input() placement: Placement;
  
  /** Events that trigger popover (space-separated) */
  @Input() triggers: string;
  
  /** Container element for the popover */
  @Input() container: string;
  
  /** If true, popover is disabled */
  @Input() disablePopover: boolean;
  
  /** Delay before showing popover */
  @Input() openDelay: number;
  
  /** Delay before hiding popover */
  @Input() closeDelay: number;
  
  /** Event emitted when popover is shown */
  @Output() shown: EventEmitter<void>;
  
  /** Event emitted when popover is hidden */
  @Output() hidden: EventEmitter<void>;
  
  /** Programmatically open the popover */
  open(): void;
  
  /** Programmatically close the popover */
  close(): void;
  
  /** Toggle popover visibility */
  toggle(): void;
  
  /** Check if popover is open */
  isOpen(): boolean;
}

Configuration Services

@Injectable({ providedIn: 'root' })
class NgbToastConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default autohide setting */
  autohide: boolean;
  
  /** Default delay in milliseconds */
  delay: number;
  
  /** Default CSS class */
  toastClass: string;
}

@Injectable({ providedIn: 'root' })
class NgbTooltipConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default autoClose setting */
  autoClose: boolean;
  
  /** Default placement */
  placement: Placement;
  
  /** Default triggers */
  triggers: string;
  
  /** Default container */
  container: string;
  
  /** Default disabled state */
  disableTooltip: boolean;
  
  /** Default CSS class */
  tooltipClass: string;
  
  /** Default open delay */
  openDelay: number;
  
  /** Default close delay */
  closeDelay: number;
}

@Injectable({ providedIn: 'root' })
class NgbPopoverConfig {
  /** Default animation setting */
  animation: boolean;
  
  /** Default autoClose setting */
  autoClose: boolean;
  
  /** Default placement */
  placement: Placement;
  
  /** Default triggers */
  triggers: string;
  
  /** Default container */
  container: string;
  
  /** Default disabled state */
  disablePopover: boolean;
  
  /** Default CSS class */
  popoverClass: string;
  
  /** Default open delay */
  openDelay: number;
  
  /** Default close delay */
  closeDelay: number;
}

Type Definitions

interface NgbToastOptions {
  /** CSS class for the toast */
  class?: string;
  
  /** Delay before auto-hiding */
  delay?: number;
  
  /** If true, toast will auto-hide */
  autohide?: boolean;
  
  /** Header text */
  header?: string;
}

Usage Examples

Basic Toast Notifications

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="showSuccess()">
        Show Success
      </button>
      <button class="btn btn-warning me-2" (click)="showWarning()">
        Show Warning
      </button>
      <button class="btn btn-danger" (click)="showError()">
        Show Error
      </button>
    </div>
    
    <ngb-toast 
      *ngFor="let toast of toasts; trackBy: trackByToast"
      [class]="toast.class"
      [autohide]="true"
      [delay]="toast.delay"
      (hide)="removeToast(toast)">
      
      <ng-template [ngIf]="toast.header">
        <ngb-toast-header>
          <strong>{{ toast.header }}</strong>
        </ngb-toast-header>
      </ng-template>
      
      {{ toast.message }}
    </ngb-toast>
  `
})
export class BasicToastComponent {
  toasts: any[] = [];
  
  showSuccess() {
    this.toasts.push({
      id: Date.now(),
      class: 'bg-success text-white',
      header: 'Success',
      message: 'Operation completed successfully!',
      delay: 5000
    });
  }
  
  showWarning() {
    this.toasts.push({
      id: Date.now(),
      class: 'bg-warning text-white',
      header: 'Warning',
      message: 'Please check your input.',
      delay: 5000
    });
  }
  
  showError() {
    this.toasts.push({
      id: Date.now(),
      class: 'bg-danger text-white',
      header: 'Error',
      message: 'Something went wrong!',
      delay: 8000
    });
  }
  
  removeToast(toast: any) {
    this.toasts = this.toasts.filter(t => t.id !== toast.id);
  }
  
  trackByToast(index: number, toast: any) {
    return toast.id;
  }
}

Basic Tooltips

@Component({
  template: `
    <div class="mb-3">
      <button 
        class="btn btn-primary me-2"
        ngbTooltip="This is a basic tooltip">
        Hover me
      </button>
      
      <button 
        class="btn btn-secondary me-2"
        ngbTooltip="Tooltip on top"
        placement="top">
        Top tooltip
      </button>
      
      <button 
        class="btn btn-success"
        ngbTooltip="Custom styled tooltip"
        tooltipClass="custom-tooltip">
        Custom tooltip
      </button>
    </div>
  `,
  styles: [`
    :host ::ng-deep .custom-tooltip .tooltip-inner {
      background-color: #28a745;
      font-size: 14px;
    }
  `]
})
export class BasicTooltipComponent {}

Template Tooltips

@Component({
  template: `
    <button 
      class="btn btn-info"
      [ngbTooltip]="tooltipTemplate">
      Rich content tooltip
    </button>
    
    <ng-template #tooltipTemplate>
      <div class="text-center">
        <strong>Rich Tooltip</strong><br>
        <small>With <em>formatted</em> content</small>
      </div>
    </ng-template>
  `
})
export class TemplateTooltipComponent {}

Basic Popovers

@Component({
  template: `
    <div class="mb-3">
      <button 
        class="btn btn-primary me-2"
        ngbPopover="This is a basic popover content"
        popoverTitle="Basic Popover">
        Click me
      </button>
      
      <button 
        class="btn btn-secondary me-2"
        ngbPopover="Popover on hover"
        popoverTitle="Hover Popover"
        triggers="hover">
        Hover me
      </button>
      
      <button 
        class="btn btn-success"
        [ngbPopover]="popoverTemplate"
        popoverTitle="Template Popover">
        Template popover
      </button>
    </div>
    
    <ng-template #popoverTemplate>
      <div>
        <p>This is a <strong>template</strong> popover.</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </ng-template>
  `
})
export class BasicPopoverComponent {}

Programmatic Control

@Component({
  template: `
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="tooltip.open()">
        Show Tooltip
      </button>
      <button class="btn btn-secondary me-2" (click)="tooltip.close()">
        Hide Tooltip
      </button>
      <button class="btn btn-info" (click)="tooltip.toggle()">
        Toggle Tooltip
      </button>
    </div>
    
    <button 
      class="btn btn-outline-primary"
      ngbTooltip="Programmatically controlled tooltip"
      triggers="manual"
      #tooltip="ngbTooltip">
      Controlled tooltip
    </button>
    
    <div class="mt-3">
      <button class="btn btn-warning me-2" (click)="popover.open()">
        Show Popover
      </button>
      <button class="btn btn-dark me-2" (click)="popover.close()">
        Hide Popover
      </button>
    </div>
    
    <button 
      class="btn btn-outline-warning"
      ngbPopover="Programmatically controlled popover"
      popoverTitle="Controlled"
      triggers="manual"
      #popover="ngbPopover">
      Controlled popover
    </button>
  `
})
export class ProgrammaticControlComponent {}

Toast Service

@Injectable({ providedIn: 'root' })
export class ToastService {
  toasts: any[] = [];
  
  show(message: string, options: Partial<NgbToastOptions> = {}) {
    this.toasts.push({
      id: Date.now(),
      message,
      ...options
    });
  }
  
  showSuccess(message: string) {
    this.show(message, {
      class: 'bg-success text-white',
      header: 'Success',
      delay: 5000
    });
  }
  
  showError(message: string) {
    this.show(message, {
      class: 'bg-danger text-white',
      header: 'Error',
      delay: 8000
    });
  }
  
  remove(toast: any) {
    this.toasts = this.toasts.filter(t => t.id !== toast.id);
  }
  
  clear() {
    this.toasts = [];
  }
}

@Component({
  selector: 'app-toast-container',
  template: `
    <ngb-toast 
      *ngFor="let toast of toastService.toasts; trackBy: trackByToast"
      [class]="toast.class"
      [autohide]="toast.autohide !== false"
      [delay]="toast.delay || 5000"
      (hide)="toastService.remove(toast)">
      
      <ng-template [ngIf]="toast.header">
        <ngb-toast-header>
          <strong>{{ toast.header }}</strong>
        </ngb-toast-header>
      </ng-template>
      
      {{ toast.message }}
    </ngb-toast>
  `,
  styles: [`
    :host {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1200;
    }
  `]
})
export class ToastContainerComponent {
  constructor(public toastService: ToastService) {}
  
  trackByToast(index: number, toast: any) {
    return toast.id;
  }
}

docs

accordion.md

alert.md

carousel.md

datepicker.md

feedback.md

forms.md

index.md

layout.md

modal.md

navigation.md

tile.json