Display a list inside of an alert box

Hello,

I want to display an alert box with a list inside of it.

I don’t want to use an ActionSheet as I want the box to sit in the middle of the screen.

I know you can display radio buttons and checkboxes within an alert box but I want to display clickable list items.

Does anyone know of an easy way to achieve this?

Regards,
Niall

1 Like

Maybe an alert is not the best case here. Since alerts are more for short, immediate messages, not full scrolling lists like that. A modal would be a better option.

Hi,

Thanks for the quick reply. The list would contain only about 4-5 items.

I am trying to make a feature similar to the popup that appears when you hold down on a message on the Viber mobile app.

Ideally, If I could display a popover in the middle of the screen that would solve my problem. :slight_smile:

I did consider a modal but it isn’t suitable for this scenario.

Regards,
Niall

Hope this will help, create a string out of a list similar to this,

this.mylist = "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"

OR

this.mylist = "<p>Item 1<br>Item 2<br>Item 3</p>"

then pass this string to the message attribute in the Alert,

message: this.mylist

Cheers!

2 Likes

If I could display a popover in the middle of the screen that would solve my problem.

I think the best way to accomplish your design is indeed to use a popover component. In the template of your popover you could place any html you like.

Attention: due to a bug in the current beta 11 you must put the popover’s template inline to your popover page in order to have it displayed centered.

1 Like

Yes this is perfect.

Including the template inline displays it properly in the middle of the screen.

Thanks very much! :slight_smile: