Modals

bs-modal renders its dialog at the end of <body>, so no overflow: hidden ancestor clips it. [(open)] is two-way; Escape, the backdrop and the header's close button close it. The content is the body; the *bsModalHeader slot is the title that names the dialog, and the *bsModalFooter slot holds its actions. Any element inside with data-bs-dismiss="modal" closes it, as in Bootstrap.

Basic usage

  
    
      
        <button [color]="colors.primary" (click)="isOpen.set(true)">Open modal</button>
        
    
      
        
        
    
      
        <bs-modal [(open)]="isOpen">
        
    
      
          <span *bsModalHeader>Modal title</span>
        
    
      
          Place any content here — forms, lists, embedded components.
        
    
      
          <ng-container *bsModalFooter>
        
    
      
            <button type="button" data-bs-dismiss="modal" [color]="colors.secondary">Close</button>
        
    
      
          </ng-container>
        
    
      
        </bs-modal>

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsModalComponent, BsModalFooterDirective, BsModalHeaderDirective } from '@mintplayer/ng-bootstrap/modal';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-modal-demo',
        
    
      
          templateUrl: './my-modal-demo.component.html',
        
    
      
          imports: [BsModalComponent, BsModalHeaderDirective, BsModalFooterDirective, BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MyModalDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
          protected readonly isOpen = signal(false);
        
    
      
        }