How to use bootstrap toggle buttons in angular application for on and off

Question

I want to use the bootstrap toggle buttons(switch buttons) in angular.(The components has to come dynamically from the backend ).

I have tried but toggling the switches is not working properly.

.component.html

<div *ngFor ="let sensor of sensors;let i =index"  (ngModelChange)="dataChanged(selectsensor)" >
<div class="custom-control custom-switch">
  
    <input type="checkbox" class="custom-control-input" (click)="dataChanged(sensor,i)" id="customSwitches">
    <label class="custom-control-label" for="customSwitches">
    {{sensor.name}}  </label>

</div>
</div>

MMM · Accepted Answer · 2021-02-01 05:35:40Z

0

Can you tell us what you are trying to do in the function call dataChanged() And you are calling the same function with different parameter.

From this structure

<input type="checkbox" 
class="custom-control-input" 
(click)="dataChanged(sensor,i)" id="customSwitches">
<label class="custom-control-label" for="customSwitches">
{{sensor.name}}  </label>

to

<input
  type="checkbox"
  class="custom-control-input"
  id="customSwitches{{i}}"
/>
<label class="custom-control-label" for="customSwitches{{i}}">
{{sensor.name}}  </label>

The id of the element is duplicated n number(n - number of sensors) of times in your structure. As per standard we can't duplicate the same id. So please index of the sensor to it. now it's working for me.

Note: we don't know what is the implementation inside the function dataChanged(). That also might cause issue. We removed both the function call from both places.

answered Feb 1, 2021 at 5:35

MMM

361 silver badge4 bronze badges

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

2 Comments

Haritha Over a year ago

Thanks, worked for me one more last requirement is that I want to activate first toggle button can you please help me

MMM Over a year ago

@Haritha, you can do it through attr.checked. Like below. Instead of the status variable you can have your own dynamic variable. <input type="checkbox" class="custom-control-input" id="customSwitches{{i}}" [attr.checked]="sensor.status===true?true:null" /> if shared answer helps you upvote it. Thanks.

Collectives™ on Stack Overflow

How to use bootstrap toggle buttons in angular application for on and off

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related