Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the selection indicator(dot) in ng-bootstrap radio buttons

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

[email protected]

@ng-bootstrap/[email protected]

like image 492
MiDaa Avatar asked Jan 07 '18 03:01

MiDaa


1 Answers

[email protected] is not fully compatible with [email protected].

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 [email protected].

If you can't, you should keep [email protected].

like image 98
Bastien Avatar answered Oct 13 '22 11:10

Bastien