ngx-bootstrap modal remove body scroll

Question

modalRef: BsModalRef;
config = {
  animated: true,
  class: 'forgot-modal'
};
openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
}
closeModal() {
    this.modalRef.hide();
    this.modalRef = null;
}

The above code opens my Modal. But the body has a scroll which need to be removed. I somehow found that class modal-open is not appended to the body tag when the modal is opened.

Answer 1

Try this workaround, you need inject Renderer2 in your component.

modalRef: BsModalRef;
config = {
  animated: true,
  class: 'forgot-modal'
};
openModal(template: TemplateRef<any>) {
   const onShown: Subscription = this.modalService.onShow.subscribe(() => {      
   setTimeout(() => {
    renderer.addClass(document.body, 'modal-open')
   }, 100);
   onShown.unsubscribe();
   const onHidden: Subscription = this.modalService.onHidden.subscribe(() => {
    renderer.removeClass(document.body, 'modal-open');
    onHidden.unsubscribe();
   });
  });
  this.modalRef = this.modalService.show(template, this.config);
}
closeModal() {
    this.modalRef.hide();
    this.modalRef = null;
}