Bootstrap data-toggle attribute disables change event - Angular

Question

In my Angular template I have this bit of code:

  <div class = "btn-group" data-toggle="buttons">
    <input type="text" class = "form-control" [(ngModel)]="siteFilter[filterType]" placeholder="Refine Search">
    <label class="btn btn-default">
        <input type="radio" (change)="changeFilter('1')" autocomplete="off">1
    </label>
    <label class="btn btn-default active">
        <input type="radio" (change)="changeFilter('2')" autocomplete="off" checked>2
    </label>
    <label class="btn btn-default">
        <input type="radio" (change)="changeFilter('3')" autocomplete="off">3
    </label>
</div>

When I use the data-toggle="buttons" attribute, my (change)="changeFilter() is not even triggered. How do I keep the the data-toggle functionality and have the change event trigger on a radio press?

You may consider using ng-bootstrap (Angular 4 + Bootstrap 4). The NgbRadioGroup could give you the functionality that you are looking for. See the code examples. — Martin Parenteau
– Martin Parenteau, Commented Aug 7, 2017 at 22:31
Yes, in hindsight I should have used ng-bootstrap from the beginning, but I'd prefer to not have to convert the whole app now. Is there a way I can use ng-bootstrap without affecting the rest of my Bootstrap 3 elements? — ecain
– ecain, Commented Aug 7, 2017 at 22:40
I don't have a lot of experience with Bootstrap but I doubt that you can mix Bootstrap 3 (CSS + jQuery) with ng-bootstrap (Bootstrap 4 CSS, without jQuery). Mixing the two might be more complicated than converting to ng-bootstrap and upgrading to Bootstrap 4. — Martin Parenteau
– Martin Parenteau, Commented Aug 8, 2017 at 0:32

deguez07 · Accepted Answer · 2017-08-25 17:24:03Z

1

Try to to bind the click event on the label (it worked for me):

<label class="btn btn-default" (click)="changeFilter('1')">
    <input type="radio" autocomplete="off">1
</label>

answered Aug 25, 2017 at 17:24

deguez07

413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ecain Over a year ago

I believe I tried that. That normally works, but does it work with the data-toggle="buttons"?

deguez07 Over a year ago

Yes, I've something working with that; however I'm using bootstrap 4.

james Makinde Over a year ago

this worked for me after several hours of searching. bootstrap 3. thanks

ecain · Accepted Answer · 2017-08-14 17:23:25Z

0

What I ended up doing was have a flag variable for each of my inputs:

[ngClass]="nameFilterActive ? 'btn btn-default active': 'btn btn-default'

Then in my Component I had a function that would change the flags depending on what was pressed.

answered Aug 14, 2017 at 17:23

ecain

1,3026 gold badges25 silver badges54 bronze badges

Collectives™ on Stack Overflow

Bootstrap data-toggle attribute disables change event - Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related