I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items.
Unfortunately, I have found that jQuery and Bootstrap are not suitable for achieving this functionality. Can anyone provide any suggestions or solutions?
Below is the code snippet I have been working on:
dropdownList.component.ts
import { Component} from '@angular/core';
import{FormsModule } from '@angular/forms';
import {Option} from './option';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
selectedItem: Option = new Option(1,'../../assets/blue2.png', 'option1');
options = [
new Option(1,'../../assets/blue2.png', 'option1'),
new Option(2, 'option2'),
new Option(3, 'option3'),
new Option(4, 'option4')
];
// Option.ts
export class Option{
constructor(public id?: number, public img?: string, public name?:
string) {
}
}
// component.html:
<select class="dropdown" id="style">
<option *ngFor="let Option of options" value={{Option.id}}
class="dropdownList">{{Option.name}}{{Option.img}}
</option>
</select>