Checkbox not showing in bootstrap dropdown - html

Question

I'm trying to simply display a checkbox in a bootstrap drop down but its just displays as blank. It's a generic dropdown. Below I've shown my code and a few screenshots. I feel like this is kinda bizarre and not sure if this is an angular thing or not.
stackblitz url:
https://stackblitz.com/edit/angular-45uk59
Code:
<div class="form-group">
<label *ngIf='label!=null' for={{id}}>{{label}}}</label>
<select class="form-control" id="{{id}}">
<option value="-1"></option>
<option *ngFor="let item of content; let i = index" value="{{item.value}}">
<span *ngIf='hasCheckbox === true'>
<!-- <input type="checkbox" id="{{id}}_i" /> &nbsp -->
<input type="checkbox" name="item.text[{{i}}]" value="{{item.value}}" />
</span>
{{item.text}}
</option>
</select>
</div>
Component:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
content: DropDownContent[] = new Array<DropDownContent>();
#Input() hasCheckbox:boolean = false;
#Input() label:string = null;
#Input() id:string = 'defaultId'
#Input() selectedId:number = -1;
#Input() size: 'lg' | 'md' | 'sm' = 'lg';
#Input() set contentInput(contentInput: DropDownContent[]) {
if (contentInput) {
this.content = contentInput.map(data => {
return <DropDownContent>(data);
});
console.log(this.content);
} else {
//?
}
}
constructor() { }
ngOnInit() {
console.log(this.id)
}
}
export class DropDownContent {
value: number;
text: string;
}
Screenshot:
Code:

Answer 1

You could wrap divs in a form like sort of hack thing. not exactly what you want but it works:
HTML
<form>
<div class="selectthingy">
<div class="Box" onclick="showMeTheBoxes()">
<select>
<option>Select an option</option>
</select>
<div class="checkboxselect"></div>
</div>
<div id="boxes_wrapper">
<label for="one">
<input type="checkbox" id="1" />SALSA</label>
<label for="two">
<input type="checkbox" id="2" />MUMBA</label>
<label for="three">
<input type="checkbox" id="3" />CHICKEN DANCE</label>
</div>
</div>
</form>
CSS
.selectthingy{
width: 300px;
}
.Box {
position: relative;
}
.Box select {
width: 100%;
}
.checkboxselect {
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
}
#boxes_wrapper {
display: none;
border: 1px green solid;
}
#boxes_wrapper label {
display: block;
}
#boxes_wrapper label:hover {
background-color: blue;
}
JS
var boxthingy= false;
function showMeTheBoxes() {
var boxes = document.getElementById("boxes_wrapper");
if (!boxthingy) {
boxes.style.display = "block";
boxthingy= true;
} else {
boxes.style.display = "none";
boxthingy= false;
}
}
https://codepen.io/Archtects/pen/LmpLZr

Answer 2

Instead of the checkbox, I suggest to use a plain text with emoji. It will be show and hidden with an ngIf with the help of hasCheckbox property combined with a new property to keep the track of selected elements:
export class DropDownContent {
value: number;
text: string;
selected: boolean
}
...
this.contentInput = [{
"value": 0,
"text": "Users",
"selected": true
},
{...
So the template could be:
<select id="{{id}}" multiple>
<option (dblclick)="item.selected=!item.selected" *ngFor="let item of content; let i = index" value="{{item.value}}">
<span *ngIf="item.selected && hasCheckbox">✓</span>
{{item.text}}
</option>
</select>
Demo