How to implement dropdown select box using alert prompt in ionic2 & typescript?

Question

The code example for alertprompt is mentioned below:

---

let prompt = this.alertCtrl.create({
            title: 'Bid on this delivery',
            inputs: [
                {
                    name: 'amount',
                    placeholder: '£ 0.0'
                },
            ],
            select: [
                {
                    ???????????
                },
            ],
            select: [
                {
                    name: 'expiry',
                    options: {
                        option: 'Nerver',
                        option: '24 hours'
                    },
                    placeholder: ''
                },
            ],
            buttons: [
                {
                    text: 'Cancel',
                    handler: data => {
                        console.log('Cancel clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: data => {
                        console.log('Saved clicked');
                    }
                }
            ]
        });
        prompt.present();

    }

---

For input the typescript code is:

[
    {
        name: 'amount',
        placeholder: '£ 0.0'
    }
]

How to implement dropdown select box?

     select: [
        ??????????????????????????
     ]

Answer 1

That depends on what you want to present in the dropdown. I would stick with https://github.com/pleerock/ng2-dropdown .

This code is taken from their documentation with some customizations tailored to your problem.

<div class="dropdown" dropdown [dropdownToggle]="false" (onOpen)="doSomeActionOnOpen()" (onClose)="doSomeActionOnClose()">
<button class="btn btn-primary" dropdown-open>My Heroes</button>
<ul class="dropdown-menu">
    <li *ngFor="let val of values"><a>{{val.placeholder}}</a></li>
</ul>

In the component that host this HTML you will need to place the values member. Assuming that AmountValue is your object = { name: 'amount', placeholder: '£ 0.0' }

@Component({....})
export class MyComponent {
    public values: Array<AmountValue>();
}