@valorkin i am trying to use the date-picker popup, instead of date-picker (as per our needs), but i am unable to make it work yet. I was trying out to update the code, but could not make my changes successfully. can i as for your suggestions, some pointers or approach to complete what is left in the popup.

Hi,

The README says Modal (in progress...). Is it true, is sb working on that? Can we share some progress here (in a separate branch presumably)? I'd consider contributing as I need it for my project...

Thanks for providing more info. Marcin

Angular v2.2 broke our get root view component ref hack temporary workaround:

1. Add ComponentsHelper to AppModule (root module)

import {ComponentsHelper} from 'ng2-bootstrap/ng2-bootstrap'
// ...
providers: [{provide: ComponentsHelper, useClass: ComponentsHelper}],

2. Set root view component ref explicitly in AppComponent (root component)

  public constructor(componentsHelper:ComponentsHelper, vcr:ViewContainerRef) {
    componentsHelper.setRootViewContainerRef(vcr);
  }

I am facing an issue with my ng2-bootstrap modals. For some reason, I am not able to show them.

Here is my HTML :

<button (click)="testModal.show()">Show this modal</button>

<div bsModal
     #testModal="bs-modal"
     class="modal fade"
     tabindex="-1"
     role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-body">
                TEST
            </div>
        </div>
    </div>
</div>

Here is my NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
    declarations: [ MODAL_DIRECTIVES],
    exports:      [ MODAL_DIRECTIVES],
    imports:      [ BrowserModule,
                    FormsModule,
                    HttpModule ],
})
export class SharedModule {}

I see this error in the log console : Error: Uncaught (in promise): Token must be defined! and the modal does not show up

I am running Angular 2 RC5. Is there something I am missing here?

Hi,

I am using ng2 bootstrap,version 1.3.3 and your modal component in one of our projects.

Our requirement is to trap the focus inside the modal however the focus is moving outside of the modal on tabbing. It then stays outside the modal until it traverses all the tabs on the page.

Is there a way you could keep the focus trapped inside the modal until the modal is closed? Or in other words it should continue looping with focus being within the modal.

Expected behavior – Focus should be trapped inside the modal window and on closing it focus should move to the element which triggers the modal window.

This is critical interaction for AX users. Appreciate any support you can provide with regards to this.

Hi,

I am using Angular RC5 and am able to open modal box in the root component (app-component) using viewProviders: [BS_VIEW_PROVIDERS] and keeping the modal box and button in the component template.

However when i do the same for other components, it triggers an error:

Error: Uncaught (in promise): No provider for AppComponent!

Any ideas how to fix this please?

Re-open : https://github.com/valor-software/ng2-bootstrap/issues/1080

The bug it still there after updating to 1.1.9, please take care to do tests before closing issues, I'll be happy to test it for you if needed. For me it's not an @Hostbinding problem.

Trying to build with ngc (last version installed) :

import { DatepickerModule } from 'ng2-bootstrap';
@NgModule({
  imports: [DatepickerModule],
})
export class MyModule {}

Results in :

dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(24,27): error TS2307: Cannot find module './datepicker-inner.component.ngfactory'.
dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(25,27): error TS2307: Cannot find module './daypicker.component.ngfactory'.
dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(26,27): error TS2307: Cannot find module './monthpicker.component.ngfactory'.
dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(27,27): error TS2307: Cannot find module './yearpicker.component.ngfactory'.
dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(178,18): error TS2341: Property 'datePicker' is private and only accessible within class 'DatePickerComponent'.
dist\tmp\app\node_modules\ng2-bootstrap\components\timepicker\timepicker.component.ngfactory.ts(755,42): error TS2445: Property 'updateHours' is protected and only accessible within class 'TimepickerComponent' and its subclasses.

Seems Datepicker is not AoT ready ;). Hope it will be soon.

I've moved to RC6. Dev and prod are running well, but when running tests I get:

No provider for NgModel ("[ERROR ->]<datepicker ngModel></datepicker>"): DatePickerComponent_Host@0:0
    Error: Uncaught (in promise): Error: Template parse errors:
        at resolvePromise (webpack:///~/zone.js/dist/zone.js:558:0 <- config/spec-bundle.js:89579:32)
        at resolvePromise (webpack:///~/zone.js/dist/zone.js:543:0 <- config/spec-bundle.js:89564:18)
        at webpack:///~/zone.js/dist/zone.js:591:0 <- config/spec-bundle.js:89612:18
        at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:365:0 <- config/spec-bundle.js:89386:38)
        at ProxyZoneSpec.onInvokeTask (webpack:///~/zone.js/dist/proxy.js:130:0 <- config/spec-bundle.js:88910:44)
        at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:364:0 <- config/spec-bundle.js:89385:43)
        at Zone.runTask (webpack:///~/zone.js/dist/zone.js:265:0 <- config/spec-bundle.js:89286:48)
        at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:497:0 <- config/spec-bundle.js:89518:36)

I'm not using the datepicker. I've just imported Ng2BootstrapModule in my Module.

Bug description:

When I upgrade to v6.0.0 version with Angular v10 Library project, I've been thrown with the below error -

Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'PopoverModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'TabsModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'TooltipModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'ModalModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

In the above, I've added the bootstrap, in CoreModule, like below -

import { PopoverModule } from 'ngx-bootstrap/popover'; import { TabsModule } from 'ngx-bootstrap/tabs'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { ModalModule } from 'ngx-bootstrap/modal';

P Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: v6.0.0

Angular: v10

Bootstrap: 4.0

Build system: Angular CLI, System.js, webpack, starter seed: Angular CLI

Expected behavior

Build should happen. It was working fine with Angular v9.x & v5.3.2.

Can you make ng2-bootstrap easy to install with angular-cli ? e.g., ng install ng2-bootstrap

Making 3rd party libraries compatible with angular-cli: https://github.com/angular/angular-cli/blob/master/docs/ng-install.md

example compatible 3rd party libraries: ng2-jwt, ng2-uploader, ng2-slimscroll, ng2-translate

I guess you have to change "main": "ng2-bootstrap.js" --> "main": "ng2-bootstrap.ts" in package.json

Hi,

I'm not sure this is actually an issue. But I didn't find a way of setting regional configuration on the datepicker component. I'd like to use it in french projects for example, and all labels are set in english.

Is there a way of doing that ? I see that the datepicker is inspired by the jquery.ui datepicker component, which allows that.

I use shared module to define Modals and share it with different parts of the app

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ModalModule } from 'ng2-bootstrap';


@NgModule({
  imports: [
      CommonModule,
      ModalModule.forRoot()
  ],
  exports: [
      CommonModule,
      FormsModule,
      ModalModule
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule
    };
  }
}

JIT compilation and runtime work fine. AoT compilation works fine but during runtime I got this error:

EXCEPTION: Uncaught (in promise): Error: Token must be defined!
Error: Token must be defined!

The issue disappears when I remove modal component div (bsModal) from template.

I use Angular 2.4.1, ng2-bootstrap 1.1.16-11

Here is a repo with steps to reproduce: https://github.com/irsick/ng2-bootstrap-bsModals-issue

Probably it's related to #986

So I have pagination on my page with bs-sortable component When I drag item over page number page is switched and new collection is loaded to ngModel binded property Then I try to drop this item back in bs-sortable (so just move it between pages) but instead of inserting this item in new collection it`s replaces existing one

Plunker/StackBlitz that reproduces the issue:

https://stackblitz.com/edit/ngx-bootstrap-tqauje?file=app/app.component.html

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 5.6.2

Angular: Angular CLI: 7.0.5

Bootstrap: 4.1.1

Expected behavior

I Expect that new item will be added to collection just like in this demo: https://valor-software.com/ngx-bootstrap/#/components/sortable#basic

Additional issue

On components page mentioned that original collection isn`t mutated and new collection is sended in onChange ad ngModelChange events, but in my project original collection is defenetly changed. Is it bedouse of me using old version or this is known issue?

The only way I can even get the pop-over to appear.
It will appear only at the bottom of the screen. Really partially off the screen Adding container="body" causes it not to appear at all.

        <button type="button"
          style="border: none"
          popover="Select None (N) to remove."
          popoverTitle="Info"
          placement="auto"
          triggers="mouseenter:mouseleave">
          <i class="fa fa-exclamation-circle" style="color: darkorange"></i>
        </button>

Bug description: When popover is opened from any corner button or icon and if we have datepicker inside that popover, when we open datepicker, positioning service is conflicted for both popover and datepicker and popover is pushing towards right/left based on popover button position and datepicker is not shown proper way

Plunker/StackBlitz that reproduces the issue: https://stackblitz.com/edit/ngx-bootstrap-popover-4wuhtg-3ywa1m?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

Versions of ngx-bootstrap, Angular, and Bootstrap: ngx-bootstrap:6.1.0

Angular:12

Bootstrap:3

Expected behavior

After opening datepicker inside popover, popover shouldn't move and datepicker should show properly

Having a data entry form with Tabset, using Viewchild to refer Tabsetcomponent to dynamically move to next tab.

first time the navigation is working as expected, however when the user completes the data entry and on save the user is routed to different component.

when the user clicks Add New and lands in the component having tabset, the viewchild tabsetcomponent is fetching empty tabs array and isDestroyed is set to true. and programmatically selecting next tab is not working. First time TabsetComponent has 2 tabs and isDestroyed.docx

Angular 13.3.4 ngx-bootstrap 9.0.0