Custom dropdown in angular

Question

How to create a custom dropdown in angular and load data

<select dropdown name="mydropDown" class="form-control dropdown-toggle">
    <option *ngFor="let item of testList" [value]="item.value">
          {{item.name}} 
    </option>
</select>

Shafran Ashraff · Accepted Answer · 2021-07-03 04:27:22Z

1

Try this!

In component ts

export class TestComponent implements OnInit {
  testList = [{ value: '1', name: 'A' }, { value: '2', name: 'Test B' }];

  constructor() { }

  ngOnInit(): void {
  }
}

In component html

<select dropdown name="mydropDown" class="form-control dropdown-toggle">
    <option *ngFor="let item of testList" [value]="item.value">
          {{item.name}} 
    </option>
</select>

answered Jul 3, 2021 at 4:27

Shafran Ashraff

3011 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

neel upadhyay · Accepted Answer · 2023-06-27 08:25:43Z

for this you need to add this to ts

document.addEventListener("click", function(event) {
  var dropdown = document.getElementsByClassName("newdropdown-selecetd")[0];
  var dropdownContent = document.getElementById("dropdown-content");
  var dropdownBtn = document.getElementById("dropdown-btn");

  if (!dropdown.contains(event.target)) {
    dropdownContent.classList.remove("show");
  }
});

function toggleDropdown() {
  var dropdownContent = document.getElementById("dropdown-content");
  dropdownContent.classList.toggle("show");
}

function selectOption(option) {
  document.getElementById("dropdown-btn").textContent = option;
  toggleDropdown(); // Close the dropdown after selecting an option
}

.newdropdown-selecetd {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5fcff;
  min-width: 160px;
      border: 1px solid #1aa0e2 ;
  z-index: 1;
  border-radius: 3px;
}

.dropdown-content a {
    color: #5e7891;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    color: #1aa0e2;
}
.dropdown-content.show {
  display: block;
}
.active-one {
  background: #aba8a8;
  color: #fff !important;
}
.dropdown-content a.active-one:hover {
  background: #aba8a8;
  color: #fff !important;
}
span#dropdown-btn {
    position: relative;
    color: #5e7891;
    padding: 8px 10px;
    border: 1px solid #0083cc;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    height: 11px;
    background-color: #f5fcff;
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial,'Nimbus Sans L','Helvetica CY',sans-serif;
    line-height: 12px;
    width: 152px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 38px;
    max-width: 152px;
    box-sizing: border-box;
    height: 29px;
      border-radius: 4px;
}

span#dropdown-btn:before {
    content: "";
    background: #1aa0e2;
    height: 27px;
    width: 31px;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #0083cc;
}
span#dropdown-btn:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: #fff transparent transparent;
}

<div class="newdropdown-selecetd">
  <span class="dropbtn" id="dropdown-btn" onclick="toggleDropdown()">Dropdown </span>
  <div class="dropdown-content" id="dropdown-content">
    <a href="#" onclick="selectOption('Option 1')">Option 1</a>
    <a href="#" onclick="selectOption('Option 2')" class="active-one">Option 2</a>
    <a href="#" onclick="selectOption('Option 3 with long name')">Option 3 with long name</a>
    <a href="#" onclick="selectOption('Option 4')">Option 4</a>
    <a href="#" onclick="selectOption('Option 5')" class="active-one">Option 5</a>
  </div>
</div>

Please explain how this code-of-wall solves the question asked - Code-only answers are not good answers - Furthermore there is no reason to post the same answer multiple times. If you think your answer solved the other question then please close-vote as such

Collectives™ on Stack Overflow

Custom dropdown in angular

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related