Dispatch a change event to a Mat Checkbox based on ID

Question

<div *ngFor="let cus of deselectedList | keyvalue"
    (click)="clickCheckBox('customer_'+cus.key+'_checkbox')">
    {{cus.key}}
    <mat-checkbox id="customer_{{cus.key}}_checkbox"
        (change)="deselectCheck($event.checked, cus.key, cus.value)">
    </mat-checkbox>
</div>

deselectedList is a map. As I have a map and am iterating through it there is no way to use [checked]. I would like to send a (change) event to the mat-checkbox based on the elements ID. I also worry a change event will not change the visual on the checkbox itself. I was trying something like this with no success:

 let box = <HTMLInputElement>document.getElementById(customer);
 box.dispatchEvent(new Event("change"));

Is it possible to update the box enabled/disabled status and trigger the (change) event?

Answer 1

Got it:

<div id="customer_{{cus}}"
        *ngFor="let cus of deselectedList | keyvalue"
        (click)="checkbox.toggle(); deselectCheck(checkbox.checked, cus.key, cus.value)">
        {{cus.key}}
        <mat-checkbox id="customer_{{cus.key}}_checkbox" class="cus-check float-checkbox-right"
            #checkbox>
        </mat-checkbox>
    </div>

And also add "pointer-events:none" to the css of the check box -> cus-check