bind to ngModel through clickable options instead of select-option (dropdown) - html

Question

I am trying to build a basic colorpicker with predefined colors.
for that I have an object "colors" with color-values as it's properties:
public colors = [
{ value: '#ffffff' },
{ value: '#919191' },
{ value: '#555555' },
// and some more
];
Following some examples on the web, I set up a select-option structure in my html:
<select name="role" [(ngModel)]="item.color">
<option *ngFor="let color of colors" [value]="color.value">
<div class="color-box-modal" [style.background]="color.value"></div>
</option>
</select>
This does create a dropdown menu for the options, though the colors inside don't show up. The class color-box-modal has height and width values as I did not intend to have a dropdown, but several colored boxes to click on in order to select.
Is there an alternative to the select-option structure which allows me to not have a dropdown, but just several colored boxes? Radio-buttons/checkboxes are not the desirerable way either, as I want to have a clickable field on it's own that reacts to being clicked.
If there is no alternative, is it possible to do the ngModel binding on a button-click?
edit:
After testing option 2 on Osman Ceas answer, I now have this:
<ng-template #content let-c="close" let-d="dismiss">
<i class="close icon" (click)="d('Close click x')"></i>
<div class="header">
Choose a new color
</div>
<div class="content">
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
</label>
<label for="col2" class="color-box-modal" style="background-color: #ffff00">
<input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
</label>
<label for="col3" class="color-box-modal" style="background-color: #00ffff">
<input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
</label>
</div>
<div class="actions">
<div class="ui button" (click)="c('Close click cancel')">Cancel</div>
</div>
</ng-template>
Though the ngModel binding does not seem to work.
The whole thing opens in a modal (the template), which in itself works, just binding to the ngModel, as I said, does not.

Answer 1

A native HTML select will only render text inside and any other tag will be ignored, so that's why your boxes are not showing.
If your wrap your radio button or checkbox in a <label> with the attribute for equals to an ID given to the <input>, you can basically click anywhere on the label, lets say some adjacent text, and the click will propagate to the input so the binding will still work.
You can create your own custom form controls, check out this article. So you could create a custom color picker form element that will work in any form using template forms or reactive forms.
Have a nice day

Answer 2

Now, this might not help everyone, but it was my solution in the end.
I started with a loop, item of items where the template in my question was meant for one single item.
I solved, or rather worked around the binding situation by just moving each item to it's own component, somewhat like this:
<div *ngFor="let item of items>
<app-sub-item [item]="item"></app-sub-item>
</div>
inside I have severel of these:
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>
With the following being in the ts-file:
setColor(color: string) {
this.item.color = color;
}
This actually works just fine at the moment.
Hope whoever reads this issue can find some use in my solution.