The checkbox next to the text does not get enabled on click, it's always the first one

Question

I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?

Here is my stackblitz url

please check this article for checkbox in ngfor : https://stackoverflow.com/questions/56456222/how-to-filter-an-object-array-using-checkbox-with-angular/56458223#56458223 — Joel Joseph, Jan 31 '20 at 11:44
You need to add the Angular library on the snippet so that it works properly. — Diogenis Siganos, Jan 31 '20 at 11:44
Without a functioning snippet, it will be hard for users to help you. Could you create a jsFiddle if you are having trouble with the snippet? — Diogenis Siganos, Jan 31 '20 at 11:49

score 0 · Accepted Answer · answered Jan 31 '20 at 12:37

The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like component-

public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2, 
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4, 
"place":"chennai-secundrabad"}];

html-

<div class="col-sm-1" style="margin-top: 10px;">
                    <mat-checkbox class="check-style" id="route.id"></mat-checkbox>
                </div>
                <div class="col-sm-10">
                    <div class="routesList">
                        {{route.place}}
                    </div>
                </div>

I hope it helps.

The checkbox next to the text does not get enabled on click, it's always the first one

1 Answers1