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, Dec 24 '17 at 00:57
where is that css ? you cannot modify the above demo link, you may try to fork it before. — HDJEMAI, Dec 24 '17 at 01:04
Try this: https://stackblitz.com/edit/ngx-bootstrap-tibwjk?file=app%2Fapp.component.css — R. Richards, Dec 24 '17 at 01:06
probably interesting, but already saw that here: https://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, Dec 24 '17 at 01:13
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, Dec 24 '17 at 01:18
it would be better if we have something like **top:50%;left:50%** or ** justify-content: center; align-items: center;** that's why I feel that there is some improvements, but will try that in a real app. the `modal` class may interfere with other part of the app ... bootstrap or anything else because its a global style as configured. but will see — HDJEMAI, Dec 24 '17 at 01:23

ConnorsFan · Accepted Answer · 2017-12-25T03:19:45.543

17

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.

edited Dec 25 '17 at 03:19

answered Dec 24 '17 at 00:56

ConnorsFan

70,558
13
122
146

OK, but as you see it is not easy to get a working example for that library, I'm looking for a concrete example, because all those modals are not showing centered, I'm trying to do that, when you try to add a live style in dev tools where you have the `modal` class, you can get a little bit the modal in the center, but unfortunately there is no concrete example about this – HDJEMAI Dec 24 '17 at 01:01
I modified your [stackblitz](https://stackblitz.com/edit/ngx-bootstrap-mjcjnz) to make the CSS styling work for the class `my-class`. I only applied colors but you can get the idea. – ConnorsFan Dec 24 '17 at 02:51
Thanks for the effort you made, `encapsulation: ViewEncapsulation.None` can probably create some styling problems for the component where I have to add the template to, probably I'll consider then creating a modal component apart to see. will do some tests and give value and some feedback for the answer later. – HDJEMAI Dec 24 '17 at 03:18
An alternative would be to define the style attributes for the class `my-modal` in a separate CSS file and simply import it in the code file: `import "./modal-class.style.css";`. – ConnorsFan Dec 24 '17 at 03:52
ConnorsFan: in the answer, can you add a `stackblitz` link where you remove `encapsulation: ViewEncapsulation.None` and adding a css file to get the same result ? – HDJEMAI Dec 25 '17 at 00:54
@HDJEMAI - I added the other [stackblitz](https://stackblitz.com/edit/ngx-bootstrap-3erfzm) to the answer. The file `modal-styles.css` is imported in `styles.css` and the encapsulation is kept in the component. – ConnorsFan Dec 25 '17 at 01:26
Thanks! Awesome answer :) – valorkin Dec 30 '17 at 08:02

Way to add custom class when using ngx-bootstrap modalService

1 Answers1

Linked