How can I use images that I am displaying dynamically from an API as checkboxes in angular 8

Basically what i want is to click on an image in order to select it and delete it from the api. So i want to display them as checkboxes so i can select then and perform delete operation.

I am fetching the images through an API and want to display them as checkbox

@Component({
  selector: 'app-image-gallery',
  templateUrl: './image-gallery.component.html',
  styleUrls: ['./image-gallery.component.css']
})
export class ImageGalleryComponent implements OnInit {

  constructor(private apiService: ApiService, private modalService: NgbModal, private http: HttpClient){}
  
  Items: any;
  
  ngOnInit() {
    this.apiService.getImage().subscribe((resp: any) => {
      this.Items = resp;
      console.log(resp);
  });
  }

 

}

 <div class="gallery-nav">
            <span class="header">My Gallery</span>
        </div>
        <div
            class=" div1 row "
            id="scrollable-content"
        >
            <div class="div2"
                *ngFor="let item of Items">
                <img

<!-- begin snippet: js hide: false console: true babel: false -->

src="" alt="" class="tn" width="100" height="120" />

        </div>