Way to Add Custom Class When Using Ngx-Bootstrap Modalservice

Way to add custom class when using ngx-bootstrap modalService

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 or apply multiple classes for ngx-bootstrap modal

The suggestion provided by @MikeOne works perfectly.

So adding space separated classes will provide the ability to apply more than one class to the modal.

we can show the modal perfectly centered and large one with this code:

this.bsModalRef = this.modalService.show(ModalConfirmationComponent,
  {class: 'modal-dialog-centered modal-lg', initialState});

So far, I don't see where this is documented in the official documentation.

NgbModal - Custom Class Styling

I had tried using the window.class: 'custom-class' property, but it wasnt working. I would add the custom class declaration and the modal would look exactly the same.

The solution, came from https://ng-bootstrap.github.io/#/components/modal/examples
which i had originally modeled my modal after.

They key piece of code here, which they do not explain why its needed or what it does so im still not entirely sure myself, was encapsulation: ViewEncapsulation.None

After adding that line to my @Component declaration, along with the custom class, all the styling worked.

Angular ngx-bootstrap - how to make a big, wide modal

DEMO For library components, if you want to effect css , You need to put style code inside styles.css code below effect all modals

.modal-dialog{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.modal-content{
  width:100% ;
  height: 100%  ;
}

but if u want to do it only for one component, then you need to add custom class to modal and do

.test{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.test .modal-content{
  width:100% ;
  height: 100%  ;
}

how to use tooltip Custom class.[ngx-bootstrap]

Globally it can be something like

.tooltip-inner {
    color: #fff !important;
    background-color: #000 !important;
}

Note: you need to have these styles in a global styles file not component styles file.

OR

You can use Component level styling options:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-tooltip-styling-local',
  templateUrl: './styling-local.html',
  /* tslint:disable no-unused-css*/
  styles: [
    `
      :host >>> .tooltip-inner {
        background-color: #009688;
        color: #fff;
      }
      :host >>> .tooltip.top .tooltip-arrow:before,
      :host >>> .tooltip.top .tooltip-arrow {
        border-top-color: #009688;
      }
    `
  ]
})
export class DemoTooltipStylingLocalComponent {}

Or use Custom class

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." containerClass="customClass">
  Demo with custom class
</button>

---

Related Topics