10

Here is the example provided by ng bootstrap. demo

I cop the same code with only label and value changes into my angular project and get the following result. my result

Here's the rendered HTML

<div _ngcontent-c1="" class="btn-group btn-group-toggle special ng-valid ng-dirty ng-touched" name="radioBasic" ngbradiogroup="" role="group" ng-reflect-name="radioBasic" ng-reflect-model="user1">
      <label _ngcontent-c1="" class="btn-primary btn active" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user1" ng-reflect-value="user1" name="radioBasic">User1
      </label>
      <label _ngcontent-c1="" class="btn-primary btn" ngbbuttonlabel="">
        <input _ngcontent-c1="" ngbbutton="" type="radio" value="user2" ng-reflect-value="user2" name="radioBasic">User2
      </label>

    </div>

Why my result is different from the example? How can I remove the selection dots?

Any fix or pointer to documents will be highly appreciated!

EDIT:

Versions here

Angular CLI: 1.6.1

Angular: 5.1.3

bootstrap@4.0.0-alpha.6

@ng-bootstrap/ng-bootstrap@1.0.0-beta.9

MiDaa
  • 1,149
  • 1
  • 11
  • 25
  • @Sajeetharan I edited the html directly in the chrome inspect page, but it shows the same result. Btw don't we need to edit the angular src code instead of editing the rendered html? – MiDaa Jan 07 '18 at 03:24
  • 1
    if you do not want the user to select you can remove the type completely – Sajeetharan Jan 07 '18 at 03:26
  • @Sajeetharan I'd like to keep the radio button behavior, just to remove the selection dot for better appearance – MiDaa Jan 07 '18 at 03:28

3 Answers3

7

ng-bootstrap@1.0.0-beta.9 is not fully compatible with bootstrap@4.0.0-alpha.6.

As bootstrap 4 beta 3 evolve and change the radio and checkbox system, ng-bootstrap don't work anymore with previous version for that.

Best solution is to jump to a bootstrap@4.0.0-beta.3.

If you can't, you should keep ng-bootstrap@1.0.0-beta.8.

Bastien
  • 635
  • 5
  • 16
  • 1
    I have the same issue with `bootstrap@4.0.0-beta.3` and `ng-bootstrap@1.0.0-beta.9` – nevh Jan 18 '18 at 06:49
1

Why my result is different from the example?

I think the reason for this behaviour is due to conflict between Bootstrap and ng-bootstrap.

You might be using both of them on the same page, and when the Bootstrap library sees an input element of the type 'radio', it is generating those selection dots.

How can I remove the selection dots?

Acess that radio input element using any CSS selector, and then change its display property to none, like:

input {
  display: none;
}

This will remove those selection dots from the page.

Nikhil
  • 6,493
  • 10
  • 31
  • 68
0

Upgrade to bootstrap@4.0.0-beta.3 to use @ng-bootstrap/ng-bootstrap@1.0.0-beta.9.

If you are locked to bootstrap@4.0.0-beta.2 (angular-cli issue) you can downgrade to @ng-bootstrap/ng-bootstrap@1.0.0-beta.8. But note that live ng-bootstrap docs show the latest version and btn-group-toggle class was previously unnecessary 1.0.0-beta.8.

Working demo

hayden
  • 2,643
  • 17
  • 21
  • bootstrap@4.0.0-beta.3 breaks angular CLI then I tried beta 2, the issue persists – MiDaa Jan 07 '18 at 05:16
  • The radio button changes were in [bootstrap@4.0.0-beta.3](https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.3) so beta.2 won't work. What do you mean it "breaks angular CLI"? – hayden Jan 07 '18 at 05:23
  • 1
    @hayden breaks angular CLI means if I include bootstrap beta 3, angular cli fails to build the project. The issue is discussed here [link](https://github.com/angular/angular-cli/issues/9020) – MiDaa Jan 07 '18 at 10:03