Way to add custom class when using ngx-bootstrap modalService

Question

When looking to the ngx-bootstrap source code here:

modal-options.class.ts

There is an optional class property defined as class?: string;.

What is the way to use it ?

Is it possible to add a custom class like:

this.modalService.config.class = 'myClass';

Before using the servive as for example:

this.modalRef = this.modalService.show(template, {
  animated: false
});

This way, I think we can add custom CSS to the displayed modal

I've tried to add a custom class without success.

That class property is not an array, if applicable, does it mean that we can only add one custom class ?

Demo: by adding and overriding the modal class, the modal is not showing

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

Adding the modal class this way do not help:

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

I moved your CSS from the app.component.css to the styles.css and I see something different. Have you tried that? — R. Richards
where is that css ? you cannot modify the above demo link, you may try to fork it before. — HDJEMAI
probably interesting, but already saw that here: plnkr.co/edit/NJRvUMZN2kHZruFgeOjQ?p=preview, in one of my questions, looks same but it could be better when having to add that in a complex app to get each component with its proper css. not sure if it’s only the way we can implement it at this point. — HDJEMAI
I just added the justify and align to the stackblitz styles.css I was playing with.. dead center. Looks good. Do you have all you need now? — R. Richards

ConnorsFan ConnorsFan · Accepted Answer · 2017-12-24T00:56:20

According to the ngx-bootstrap documentation about the Modal component (see the component tab), you can add a class member to the config object.

Important: Since 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.

The code snippet below can be executed in this stackblitz.

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);
  }
}

with a CSS file like this:

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

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

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

Update: This other stackblitz shows an example of CSS styles imported from an external file into styles.css, allowing to keep the CSS encapsulation in the component.

Way to add custom class when using ngx-bootstrap modalService

1 Answers