Ngx-bootstrap: unable to set theme to bootstrap4 with systemjs

[mjhugo]

When using SystemJS, you cannot switch the theme to Bootstrap 4 via the recommended method:

import {Ng2BootstrapConfig, Ng2BootstrapTheme} from 'ng2-bootstrap/ng2-bootstrap';

Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

enableProdMode();

 bootstrap(AppComponent);

When this is done, the AppComponent will recognize the BS4 theme, but the ng2 components will not.

As an example, clone https://github.com/mjhugo/angular2-quickstart (which has been updated to bs4 theme, see https://github.com/mjhugo/angular2-quickstart/commit/953d888991c058dbf75318393367b54c818b627b) and run npm i and npm start and notice that the theme will not be applied correctly

If it had applied the bs4 theme correctly, it should look more like this:

As indicated in https://github.com/valor-software/ng2-bootstrap/issues/371 there is a workaround - add this script block and ng2-bootstrap will switch to bootstrap4 theme.

  <script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
  </script>

[maxfisher05]

this is because Glyphicons is included in bootstrap 3 but not in 4, you are missing the glyphicon-chevron-left and glyphicon-chevron-right icons. I think that it would be nice if ng2-bootstrap had support for changing out icon pack for bs4.

if you are using font-awesome + bs4 you can add css aliases like this (using sass):

.glyphicon {
  @extend .fa;

  &.glyphicon-chevron-left {
    @extend .fa-chevron-left;
  }

  &.glyphicon-chevron-right {
    @extend .fa-chevron-right;
  }

  &.glyphicon-chevron-up {
    @extend .fa-chevron-up;
  }

  &.glyphicon-chevron-down {
    @extend .fa-chevron-down;
  }
}

[valorkin]

@mjhugo you can check

  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/glyphicons.css">

from demo folder

but I am completely agreed with @maxfisher05
And I working on more simple template switching

[valorkin]

@mjhugo please close an issue if @maxfisher05 answer was helpful

[mjhugo]

Thanks for the feedback and suggestion.

I tried adding glyphicons but still no luck. (https://github.com/mjhugo/angular2-quickstart/commit/eb6c1acb6cb0fd9e354763d49821f0d5d3b64ffe) so I don't think that's the actual issue. You're correct that the glyphicons are missing in my screen shot - but also notice that the CSS styling is BS3 styles, not BS4.

If you set a debugging breakpoint in the DATEPICKER_DIRECTIVES and check the value of Ng2BootstrapConfig.theme you will find that it still set to BS3 instead of BS4. My guess is that the ng2 components are initializing _before_ AppComponent and as such, they are initialized with a theme of BS3 before the AppComponent changes the theme to BS4.

[ciesielskico]

+1 for way of changing icon package, I would like to use FontAwesome instead of Glyphicons.

[Hongbo-Miao]

Similar here, I am using Typeahead.

import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap/ng2-bootstrap';
Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

does not work for me, it gives me bad style:

But

  <script type="text/javascript">
    window.__theme = 'bs4';
  </script>

gives me good style:

[searchforac]

The daypicker left right buttons seem to show text arrows instead of the cheveron glyphicons that are on the monthpicker and yearpicker. This is also the case in the example. I've tried setting the ARROW_LEFT and ARROW_RIGHT variables to the icons instead of &lt and &gt but that doesn't change anything. What am I missing?

I was able to get the glyphicons to show by using the script workaround and downloading the glyphicons.

[fstof]

@searchforac
I can confirm this issue, It seems the glyphicons-chevron-left/right were replaced with > and < on the day page but the month and year are still using the glyphicons

would be great if this can be sorted out, seems simple enough

[cfm017]

+1

[StealthyDev]

Is there a fix or workaround for this issue? How does it work in DEMO page?

[tommiv]

@StealthyDev, it's in the first message of this thread

<script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
</script>

[StealthyDev]

Sorry, I tried this. I'm also using WebPack.

[tommiv]

It worked for me, but i've tried it while ago. Btw, it doesn't matter if you use WebPack, since Webpack just bundles your code. You still need to include target bundle in page <head>. Just make sure you put workaround script above the webpack bundle.

[valorkin]

This hack was written a long long time ago
Now I can switch to 'forRoot' method to choose app theme

[StealthyDev]

How do you do it?

[valorkin]

You can check our demo page source
https://github.com/valor-software/ng2-bootstrap/blob/development/demo/index-bs4.html

[StealthyDev]

Yes, it fixed it. Thank you.