Buttons with action inside Alert window

I’m trying to create an alert (prompt) window which has buttons inside it, but I cannot find a way to do it.

Looking at the documentation I can insert input’s (text,phone,checkbox,radio’s) but I did not find anything about buttons with click actions.

Then I thought I can inject it into a message part of the Alert something like this:

		let alert = this.alertCtrl.create({
		
			 title: 'Risk assesment',
			 subTitle: 'I have understood and completed the follwoing risk assesment(s)',
			 message: "<ion-item><p style='overflow:auto;white-space:normal;'>Test</p> <button ion-button outline item-right icon-left (click)='itemSelected()'><ion-icon name='eye'></ion-icon>View</button>",
			 buttons: [
						{
						  text: 'Disagree',
						  handler: () => {
							console.log('Disagree clicked');
						  }
						},
						{
						  text: 'Agree',
						  handler: () => {
							console.log('Agree clicked');
						  }
						}
					]
			});
										
			alert.present();

But this won’t work because of XSS (WARNING: sanitizing HTML stripped some content )

My next idea was to pre-create the whole modal alert window in html and use ngIf to hide it / show it but I wasn’t able to find anywhere the exact html for the Alerts.

Any idea’s on how can I achive this?

Thank you.

Did I understand correctly that you want an Alert with two buttons and some text - but in this text there should be clickable things?

Hi.

No I want an alert box with multiple buttons inside, something similar like the checkboxes, but instead a checkbox a button (or at least an icon) which i clickable.

Currently I have work-around it by using a modal instead.

Ok, so an Alert with not normal buttons but buttons in the text. Correct?

Nope, normal buttons remain like, OK/Cancel/etc,

See attached mock-up drawing.

Does the user click all of them before he can (successfully) click “Okay”?

Problem is that Alert is thought of as an input, kind of like a form. That doesn’t really match what you are trying to build I think.

No the user does not NEED to click on every single item before click OK/Cancel, but it can if he/she wish so. The “View” button is supposed to open an inAppBrowser which display a PDF. Basically it’s more of a short reminder before some completes a job that he/she have done all the pre-flight checks, 95% of users will just click the OK instantly.

Ok, then I don’t see any workaround. (You could try to do it with checkboxes which get restyled to buttons and somehow try to attach a click event to them - but you’re better off building it as a normal modal.)

Yeah I falled back to modal, doesn’t “looks” like an alert window (could style it of course), but it does the job spot on, so will stick with that.

Thanks for the help!

1 Like

did you get anything?

I’m working on a rate plugin and I need to use alert, no modals. Right now it looks ok but I’d need some action to draw the icons when I click on them:
39