Angular Bootstrap Modal Events

Angular Bootstrap modal events is a set of JS scripts that let you launch Angular Bootstrap modals based on a action performed by a user.

"onShow" event

This event is fired just before the modal is open.

Launch Modal Success





  
    
    
      
      
        Modal Success

        
      

      
      
        
          
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur
            in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
        
      

      
      
        Get it now
          
        
        No, thanks


import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onShow(event: any) {
    console.log(event);
  }
}

"onShown" event

This event is fired after the modal is shown.

Launch Modal Info





  
    
    
      
      
        Modal Info

        
      

      
      

        

        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
        
      

      
      
        Get it now
          
        
        No, thanks


import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onShown(event: any) {
    console.log(event);
  }
}

"onHide" event

This event is fired just before the modal is hidden.

Launch Modal Danger





  
    
    
      
      
        Modal Danger

        
      

      
      

        
          
            
            
              
            
          

          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.
            
              v52gs1
            
          
        
      

      
      
        Get it now
          
        
        No, thanks


import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onHide(event: any) {
    console.log(event);
  }
}

"onHidden" event

This event is fired after the modal is closed.

Launch Modal Warning





  
    
    
      
      
        Modal Warning

        
      

      
      

        
          
            
            
            Jane
            Consultant
          

          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.
            
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            
          
        


      

      
      
        Get it now
          
        
        No, thanks


import { Component } from '@angular/core';

@Component({
  selector: 'modal-event',
  templateUrl: './modal-event.component.html',
  styleUrls: ['./modal-event.component.css']
})
export class ModalEventComponent {
  onHidden(event: any) {
    console.log(event);
  }
}

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Modals:

// MDB Angular Pro
import { ModalModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { ModalModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'

Import example Modules list