Angular 6 - Reactive Form, Binding image with checkbox

In my app I have a form where in one stage the user needs to select one or more images from given images.

In HTML I have images and checkboxes

<div *ngFor="let image of images">
   <img id="image" src="" (click)="onImageClick">
   <mat-checkbox id="checkbox"></mat-checkbox>
</div>

What is the best way to bind the images so, that when they are clicked, it would check the correct checkbox?

E.g in TS (Not working "Type 'HTMLElement' cannot be converted to type 'MatCheckbox'")

images = [
{
  'id': 1,
  'url': '../../../assets/imgs/img_00000001.jpg'
},
...
{
  'id': 4,
  'url': '../../../assets/imgs/img_00000004.jpg'
}
];

...

onImageClick(id) { 
const checkbox = (<MatCheckbox>document.getElementById('checkbox' + id));
checkbox.checked = true;
}

Thanks for help