ngmodel binding with dynamic array of checkbox in

Question

I have a component in angular 2 where i generate a list of checkboxes from an array.

Now i need to populate a different array basd on the checkboxes checked and this should be a two way binding, meaning the checkboxes must already be checked if their values are already in the array. I used a plugin called checklist-model in angular 1 to do this.

<h4><label><input type="checkbox" value="" (click)=checkAll(screen)>{{screen.screen_name}}</label></h4>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6" *ngFor="let perm of screen.permissions">                    
                    <div class="checkbox" >
                      <label><input type="checkbox" (change)="logCheckbox(cb)" [(ngModel)]="permissionsArray[]" [value]="perm.permission">{{perm.permission}}</label>
                    </div>
                </div>
            </div>

In the above code the permissionsArray[] in ngModel is just for representation to show you what I want. I want to populate the permissionsArray[] based on the permissions selected and vice versa.

I tried creating a local reference variable on the checkboxes but that didn't work too since the whole array is dynamic.

Another requirement would be if the Screen checbox is checked then all child checkboxes in the screen should also be checked and I have no clue on how to approach that either.

I guess the basic issue is I am not sure how to access the checkboxes individually from my code behind since they are dynamic.

Any tips on what approach i should use?