Cannot read property 'backdrop' of undefined

Question

This is code I'm using in my HTML page. In my angular module I import every relevant things. But always says this error because of backdrop. Please help. I have no idea about this backdrop.If some can explain please what is this error and why it comes ?


      
        
          
            
               Bootstrap Modals
            
            
              
              
            
          
        
        
      
      
    

    
      
        
          
            Modal title
            
          
          
            One fine body…

This is my .ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

@Component({
  selector: 'app-mso-user-profile',
  templateUrl: './mso-user-profile.component.html',
  styleUrls: ['./mso-user-profile.component.css']
})
export class MsoUserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

user_2304193 · Answer

If you are trying to load component dynamically by factory like below:

const factory = this.resolver.resolveComponentFactory(YOURModalComponent);
const componentRef = this.fileAttacherContainer.createComponent(factory);
const component = componentRef.instance;

You have to wait till the component creation complete by the factory resolver, I mean when the component doesn't create yet then initialize of ngx-bootstrap backdrop not called, for example if you call your show modal like below everything goes well:

setTimeout(() => {
    component.show();
}, 2000); //any millisecond

But, do not forget this is a bad solution, but I told for your better understanding.

Finally, the good solution is using Promises or simply call component.show(); in ngAfterViewInit of your child component.

By the way, read this article too: https://angular.io/api/core/AfterViewChecked

user_356760 · Answer

import this class:

// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

Cannot read property 'backdrop' of undefined

2 Answers