TypeScript @ng-bootstrap/ng-bootstrap NgbModal Examples

Programming Language: TypeScript

Namespace/Package Name: @ng-bootstrap/ng-bootstrap

Class/Type: NgbModal

Examples at hotexamples.com: 30

@ng-bootstrap/ng-bootstrap is a package library that provides Angular directives for the Bootstrap framework. One of its directives is NgbModal, which can be used to display modals in an Angular application.

Here is a brief description and code example of how to use NgbModal in a TypeScript file:

Description: The code below imports NgbModal from @ng-bootstrap/ng-bootstrap and declares it as a private variable in the component. The openModal() function is then defined, which creates a new instance of the modal and displays it when the button is clicked.

Code Example:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
...
export class MyComponent {
  constructor(private modalService: NgbModal) {}

  openModal(content) {
    this.modalService.open(content);
  }
}

In the HTML file, you can then use the NgbModal directive to define the modal content and trigger the openModal() function:




  
    Modal Title
    
  
  
    Modal Content

In this example, NgbModal is included as part of the @ng-bootstrap/ng-bootstrap package library.

TypeScript NgbModal - 30 examples found. These are the top rated real world TypeScript examples of @ng-bootstrap/ng-bootstrap.NgbModal extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

open(30)

dismissAll(1)

Example #1

Show file

File: instructor-help-questions-section.component.ts Project: TEAMMATES/teammates

 /**
  * Opens modal window.
  */
 openModal(modal: any): void {
   this.modalService.open(modal);
 }

Example #2

Show file

File: confirm.service.ts Project: Schlogen/angular-confirm

 confirm(template: string | TemplateRef<any>, options ?: NgbModalOptions): Promise<any> {
     return this.modalService.open(template, options).result;
 }

Example #3

Show file

File: subservice-grid.component.ts Project: xeredi/portico

        this.ssrvService.filter( this.model ).subscribe( resp => {
            this.portList = resp.prtoList;
            this.labelValuesMap = resp.labelValuesMap;

            this.modalService.open( filter, { size: "lg" } );
        } );

Example #4

Show file

File: modals.component.ts Project: LunarChild/ngx-admin

  showSmallModal() {
    const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });

    activeModal.componentInstance.modalHeader = 'Small Modal';
  }

Example #5

Show file

File: chauffeurs.component.ts Project: thienban/gestion-du-transport

 ajout() {
   const modalRef = this.modalService.open(CreerChauffeurComponent);
 }

Example #6

Show file

File: app.component.ts Project: andrask/CloudFlow

 about() {
     this.modal.open(AboutComponent);
 }

Example #7

Show file

File: elasticsearch-reindex.component.ts Project: alv-ch/job-room

 showConfirm(document) {
     const ngbModalRef = this.modalService.open(ElasticsearchReindexModalComponent);
     ngbModalRef.componentInstance.document = document
 }

Example #8

Show file

File: event-list.component.ts Project: tstapler/DJ-Alfred

 editEvent(event){
   let modal = this.modalService.open(EventFormComponent)
   modal.componentInstance.modal = modal;
   modal.componentInstance.event = event;
 }

Example #9

Show file

File: product-option-detail.component.ts Project: chenshao0594/eshop

 createOptionValue(content) {
     this.modalRef = this.modalService.open(content);
     this.modalRef.result.then((result) => {
       }, (reason) => {
       });
   }

Example #10

Show file

File: checklist.component.ts Project: marianojabdala/skf-flask

 open(content, level: number) {
   this.checklistService
     .getChecklist(level)
     .subscribe(checklistItems => { this.checklistItems = checklistItems });
     this.modalService.open(content, { size: 'lg' })
 }

Show more examples