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

Modal Components

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

Service-based modal dialogs with backdrop support, keyboard navigation, and flexible content options. Perfect for confirmations, forms, and detailed content display.

Core Imports

import { 
  NgbModalModule, 
  NgbModal, 
  NgbModalRef,
  NgbActiveModal,
  ModalDismissReasons 
} from '@ng-bootstrap/ng-bootstrap';

Capabilities

NgbModal

Service for opening and managing modal dialogs.

@Injectable({ providedIn: 'root' })
class NgbModal {
  /** Open a modal dialog */
  open(content: any, options?: NgbModalOptions): NgbModalRef;
  
  /** Dismiss all open modals */
  dismissAll(reason?: any): void;
  
  /** Check if there are any open modals */
  hasOpenModals(): boolean;
}

NgbModalRef

Reference to an opened modal instance.

class NgbModalRef {
  /** Instance of the component if modal contains a component */
  componentInstance?: any;
  
  /** Promise that resolves when modal is closed or dismissed */
  result: Promise<any>;
  
  /** Close the modal with a result */
  close(result?: any): void;
  
  /** Dismiss the modal with a reason */
  dismiss(reason?: any): void;
  
  /** Update modal options */
  update(options: NgbModalUpdatableOptions): void;
}

NgbActiveModal

Reference to the currently active modal (used within modal content).

@Injectable()
class NgbActiveModal {
  /** Close the modal with a result */
  close(result?: any): void;
  
  /** Dismiss the modal with a reason */
  dismiss(reason?: any): void;
}

NgbModalConfig

Configuration service for setting default modal behavior.

@Injectable({ providedIn: 'root' })
class NgbModalConfig {
  /** Enable/disable animations */
  animation: boolean;
  
  /** Backdrop behavior */
  backdrop: boolean | 'static';
  
  /** Function called before dismissing */
  beforeDismiss: () => boolean | Promise<boolean>;
  
  /** Center modal vertically */
  centered: boolean;
  
  /** Container element for the modal */
  container: string | Element;
  
  /** Enable/disable keyboard support */
  keyboard: boolean;
  
  /** Make modal content scrollable */
  scrollable: boolean;
  
  /** Modal size */
  size: 'sm' | 'lg' | 'xl';
  
  /** Custom CSS class for modal window */
  windowClass: string;
}

Options and Interfaces

interface NgbModalOptions {
  /** Enable/disable animations */
  animation?: boolean;
  
  /** Backdrop behavior (true, false, or 'static') */
  backdrop?: boolean | 'static';
  
  /** Function called before dismissing the modal */
  beforeDismiss?: () => boolean | Promise<boolean>;
  
  /** Center modal vertically */
  centered?: boolean;
  
  /** Container element for the modal */
  container?: string | Element;
  
  /** Injector to use for component content */
  injector?: Injector;
  
  /** Enable/disable keyboard support (ESC to close) */
  keyboard?: boolean;
  
  /** Make modal content scrollable */
  scrollable?: boolean;
  
  /** Modal size */
  size?: 'sm' | 'lg' | 'xl';
  
  /** Custom CSS class for modal window */
  windowClass?: string;
  
  /** Custom CSS class for modal backdrop */
  backdropClass?: string;
  
  /** Custom CSS class for modal content */
  modalDialogClass?: string;
}

interface NgbModalUpdatableOptions {
  /** Enable/disable animations */
  animation?: boolean;
  
  /** Center modal vertically */
  centered?: boolean;
  
  /** Make modal content scrollable */
  scrollable?: boolean;
  
  /** Modal size */
  size?: 'sm' | 'lg' | 'xl';
  
  /** Custom CSS class for modal window */
  windowClass?: string;
  
  /** Custom CSS class for modal backdrop */
  backdropClass?: string;
}

enum ModalDismissReasons {
  /** Modal dismissed by clicking backdrop */
  BACKDROP_CLICK,
  
  /** Modal dismissed by pressing ESC key */
  ESC
}

Usage Examples

Basic Modal with Template

@Component({
  template: `
    <button class="btn btn-primary" (click)="openModal(content)">
      Open Modal
    </button>
    
    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">Modal Title</h4>
        <button type="button" class="btn-close" (click)="modal.dismiss()"></button>
      </div>
      
      <div class="modal-body">
        <p>This is a basic modal example.</p>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">
          Cancel
        </button>
        <button type="button" class="btn btn-primary" (click)="modal.close('Save click')">
          Save
        </button>
      </div>
    </ng-template>
  `
})
export class BasicModalComponent {
  constructor(private modalService: NgbModal) {}
  
  openModal(content: any) {
    const modalRef = this.modalService.open(content);
    
    modalRef.result.then((result) => {
      console.log('Modal closed with result:', result);
    }).catch((error) => {
      console.log('Modal dismissed:', error);
    });
  }
}

Modal with Component Content

@Component({
  selector: 'app-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{ title }}</h4>
      <button type="button" class="btn-close" (click)="activeModal.dismiss()"></button>
    </div>
    
    <div class="modal-body">
      <form>
        <div class="mb-3">
          <label for="name">Name:</label>
          <input type="text" class="form-control" [(ngModel)]="name" name="name">
        </div>
      </form>
    </div>
    
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">
        Cancel
      </button>
      <button type="button" class="btn btn-primary" (click)="save()">
        Save
      </button>
    </div>
  `
})
export class ModalContentComponent {
  @Input() title: string = 'Default Title';
  name: string = '';
  
  constructor(public activeModal: NgbActiveModal) {}
  
  save() {
    this.activeModal.close(this.name);
  }
}

@Component({
  template: `
    <button class="btn btn-primary" (click)="openComponentModal()">
      Open Component Modal
    </button>
  `
})
export class ComponentModalComponent {
  constructor(private modalService: NgbModal) {}
  
  openComponentModal() {
    const modalRef = this.modalService.open(ModalContentComponent);
    modalRef.componentInstance.title = 'Custom Title';
    
    modalRef.result.then((result) => {
      console.log('User entered:', result);
    });
  }
}

Modal with Custom Options

@Component({
  template: `
    <button class="btn btn-primary me-2" (click)="openCenteredModal(content)">
      Centered Modal
    </button>
    <button class="btn btn-success me-2" (click)="openLargeModal(content)">
      Large Modal
    </button>
    <button class="btn btn-warning" (click)="openStaticModal(content)">
      Static Modal
    </button>
    
    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">Custom Modal</h4>
        <button type="button" class="btn-close" (click)="modal.dismiss()"></button>
      </div>
      <div class="modal-body">
        <p>This modal demonstrates custom options.</p>
      </div>
    </ng-template>
  `
})
export class CustomModalComponent {
  constructor(private modalService: NgbModal) {}
  
  openCenteredModal(content: any) {
    this.modalService.open(content, { 
      centered: true,
      size: 'sm'
    });
  }
  
  openLargeModal(content: any) {
    this.modalService.open(content, { 
      size: 'lg',
      scrollable: true
    });
  }
  
  openStaticModal(content: any) {
    this.modalService.open(content, {
      backdrop: 'static',
      keyboard: false
    });
  }
}

Confirmation Modal Service

@Injectable({ providedIn: 'root' })
export class ConfirmationService {
  constructor(private modalService: NgbModal) {}
  
  confirm(
    title: string = 'Confirm',
    message: string = 'Are you sure?',
    btnOkText: string = 'OK',
    btnCancelText: string = 'Cancel'
  ): Promise<boolean> {
    const modalRef = this.modalService.open(ConfirmationModalComponent);
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = btnOkText;
    modalRef.componentInstance.btnCancelText = btnCancelText;
    
    return modalRef.result.catch(() => false);
  }
}

@Component({
  selector: 'app-confirmation-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{ title }}</h4>
    </div>
    <div class="modal-body">
      <p>{{ message }}</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">
        {{ btnCancelText }}
      </button>
      <button type="button" class="btn btn-primary" (click)="activeModal.close(true)">
        {{ btnOkText }}
      </button>
    </div>
  `
})
export class ConfirmationModalComponent {
  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;
  
  constructor(public activeModal: NgbActiveModal) {}
}