ngx-bootstrap modal doesn't get custom classes

Question

I'm trying to define a new width for a modal created using BsModalService. I can't change it by giving him a custom class. Only by using given classes such as 'modal-xl'. Why? And in which file should I set class style?

openModal() {
const initialState = {
  type: 'form',
  headerTitle: 'Modal',
  actionButtonLabel: 'Submit',
  onConfirmation: this.onSubmitCliked
};
this.modalRef = this.bsModalService.show(
  ModalComponent,
  Object.assign({ initialState }, { class: 'kushkush' }));

}

Answer 1

The modal element is outside of the component element in the rendered HTML, the CSS encapsulation should be turned off for the component, or the style attributes for the class should be specified in another file, to make sure that the styles are applied to the modal element. Refer the below examaple.

import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  modalRef: BsModalRef;
  config = {
    animated: true,
    keyboard: true,
    backdrop: true,
    ignoreBackdropClick: false,
    class: "my-modal"
  };

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}

CSS classes should be as follows.

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: lime;
}

.my-modal .modal-body {
  background-color: orange;
}