NgbModule.forRoot() breaks ‘traditional’ style radio buttons

Bug description:

I am attempting to use ‘traditional’ style radio buttons, i.e the radio’s you can see here

The plunker below shows that these radio’s do not work when NgbModule.forRoot() has been called.

You can still interact with the radios, however they do not show the initial value of the model.

Link to minimally-working plunker that reproduces the issue: http://plnkr.co/edit/6BTqmJESmtsjWGwgUuo0?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.0.0

ng-bootstrap: 1.0.0-alpha.14

Bootstrap: 4.0.0-alpha.5

2 thoughts on “NgbModule.forRoot() breaks ‘traditional’ style radio buttons

  1. This is a nasty one. I spent 2 days for this, since I didn’t know it is possible. I am on alpha.20. The standard behavior still doesn’t work.

    I love this library, but I think if we find a component that can break the default usage, we should remove it from the whole package temporary. Btw, It is not a BAN to that component. lol

    ref: qdouble/angular-webpack-starter#247

  2. My work around is pretty simple — exclude ngbRadioButton component.

    Just create a custom module to include everything but ngbRadioButton.

    In fact, I think it might be a good idea to do this, just include the ones that you need.

    Here it is, save you some time.

    import {
        NgbAccordionModule,
        NgbAlertModule,
        // NgbButtonsModule,
        NgbCarouselModule,
        NgbCollapseModule,
        NgbDatepickerModule,
        NgbDropdownModule,
        NgbModalModule,
        NgbPaginationModule,
        NgbPopoverModule,
        NgbProgressbarModule,
        NgbRatingModule,
        NgbTabsetModule,
        NgbTimepickerModule,
        NgbTooltipModule,
        NgbTypeaheadModule
    } from '@ng-bootstrap/ng-bootstrap';
    import { ModuleWithProviders, NgModule } from '@angular/core';
    const NGB_MODULES = [
        NgbAccordionModule, NgbAlertModule, NgbCarouselModule, NgbCollapseModule, NgbDatepickerModule,
        NgbDropdownModule, NgbModalModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule, NgbRatingModule,
        NgbTabsetModule, NgbTimepickerModule, NgbTooltipModule, NgbTypeaheadModule
    ];
    
    @NgModule({
        imports: [
            NgbAlertModule.forRoot(), NgbCollapseModule.forRoot(), NgbProgressbarModule.forRoot(),
            NgbTooltipModule.forRoot(), NgbTypeaheadModule.forRoot(), NgbAccordionModule.forRoot(), NgbCarouselModule.forRoot(),
            NgbDatepickerModule.forRoot(), NgbDropdownModule.forRoot(), NgbModalModule.forRoot(), NgbPaginationModule.forRoot(),
            NgbPopoverModule.forRoot(), NgbProgressbarModule.forRoot(), NgbRatingModule.forRoot(), NgbTabsetModule.forRoot(),
            NgbTimepickerModule.forRoot(), NgbTooltipModule.forRoot()
        ],
        exports: NGB_MODULES
    })
    export class CNgbRootModule {
    }
    
    // tslint:disable-next-line:max-classes-per-file
    @NgModule({ imports: NGB_MODULES, exports: NGB_MODULES })
    export class CNgbModule {
        static forRoot(): ModuleWithProviders { return { ngModule: CNgbRootModule }; }
    }