How can I get drop down list have check button with angular?

I just started learning angular 2 and making small web page.

One important requirement is to have expanded drop down list with check button.

The drop down list has to stay expanded, show 10 elements by default and support multiple selection. so I used multiple and size attribute for it. But I can't find a way to put checkbox in front of each element.

I also thought about using checkbox control instead of select option. But as there are so so many elements, I don't know how to make only 10 items visible with scroll bar.

Below is my code. Each group has array of element object. Can anyone help me please?

<div class="blahblah">
    <div class="select-wrapping hide-list" >
        <select class="wide" size="10" name="groups" multiple>
            <optgroup *ngFor="let group of groups" label="">
                <option *ngFor="let element of group.elements" [value]="element.ID">
            </optgroup>
        </select>
    </div>
</div>