CODEWITHSUNDEEP
angularthemesbootstrap-modalng-bootstrap
jarodsmk
jarodsmk

Reputation: 2099

Apply styling to NgBootstrap modal in Angular at runtime

I have an application which can have a theme swapped out on run time.

A BaseComponent is my primary component which is added in my AppComponent, and has a theme property (which is essentially just a class applied on one of the wrapping elements), like so:

In base.component.html

...
<div [ngClass]="theme" class="theme-container">
    <!-- other components of application here -->
</div>
...

The last issue I have to sort out with my theme-ing code is styling the Bootstrap models which get added to the of my application at run time, and since the class for my theme is only applied to my BaseComponent, obviously no styling gets applied to the modal.

For instance, say I have a Dark theme and a Light theme, a typical scenario. How could I apply such styling to a modal where it's contents are added to the body of my application?

Upvotes: 0

Views: 440

Answers (1)

Kld
Kld

Reputation: 7068

ngb-modal-window will be inserted at the <body> tag so you should add your theme css class to the body tag using the angular renderer 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  theme = "my-theme";
  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, this.theme);
  }
}

Upvotes: 1

Related Questions