Looking solutions for a custom dropdown with dynamic form drop down option

Question

I'm using angular 5 and primeng version 6 for my current project. I'm trying to implement a drop down component.But I need to implement dynamic option with form on it,like the image provided.that form(drop down option) has some function on it.

I have tried this, but no luck.

<select >
  <option value="1">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
  <option value="2">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
<option value="3">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
</select>

is this possible?. any better solution for this?

Image of the dropdown

Answer 1

Use @angular/cdk/overlay to build this component.

<!-- This button triggers the overlay and is it's origin -->
<input (click)="isOpen = !isOpen" type="text"  cdkOverlayOrigin #trigger="cdkOverlayOrigin" >

<!-- This template displays the overlay content and is connected to the button -->
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
  <ul class="example-list">
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input type="text" >
       <button>+</button>
       <button>add</button>
    </form></li>
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input  type="text">
       <button>+</button>
       <button>add</button>
    </form></li>
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input  type="text">
       <button>+</button>
       <button>add</button>
    </form></li>
  </ul>
</ng-template>

Example : https://material.angular.io/cdk/overlay/examples

Sample