Как сделать ngx-bootstrap модальным по горизонтали?

Question

У меня есть рабочий модал ngx-bootstrap, созданный в angular 5. Я хотел позволить пользователю изменять ширину модального поля после его отображения. какие-либо свойства CSS должны быть включены .?

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

    
        
            ×
        
    

{{data}}

</ Нг-шаблон> Создать модальный шаблон

Требуется, чтобы пользователь мог перетаскивать и увеличивать ширину модального ngx

Answer 1

В CSS файл необходимо добавить строки ниже

::ng-deep .modal-content{
  width: 800px;
}

Answer 2

Размер модальной начальной загрузки зависит от двух классов: 'modal-lg' для большого модального и 'modal-sm' для малого модального.

Вы можете использовать [ngClass] для переключения следующих классов:

<div class="modal-dialog" [ngClass]="bigSize ? 'modal-lg' : 'modal-sm'">

И для переключения логического свойства bigSize в пользовательском событии, нажмите кнопку, например, для:

<button (click)="bigSize = !bigSize">Toggle Size</button> 

---

Вот Рабочий образец StackBlitz для вашей ссылки.