Getting a native element's reference inside an *ngFor

databinding

#1

I am looping over a list of items using *ngFor, generating new CheckBox elements.

I need to determine the checked state of each CheckBox.

Normally I would create a reference to the box using @ViewChild but an unsure how to accomplish this when the boxes are being dynamically generated.


#2

As a temporary work around what I did was get the index of each item in the *ngFor and pass that index to a method which pushes the checked state to a list of Booleans.

    <FlexobxLayout *ngFor="let addon of addons; let i = index" justifyContent="center" flexWrap="wrap">
        <FlexboxLayout alignItems="center" justifyContent="space-between">
            <Label [text]="addon.getName()"></Label>
            <CheckBox checked="false" (tap)="toggleAddon(i)"></CheckBox>
        </FlexboxLayout>
    </FlexobxLayout>