Ionic 4 JS Vanilla

by PlĂ­nio Naves

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ionic 4</title>
	<link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet">
</head>
<body>

	<ion-app>
		<ion-header>
			<ion-toolbar>
				<ion-title>
					Ionic 4
				</ion-title>
			</ion-toolbar>
		</ion-header>

		<ion-content padding>
			<ion-button id="btn-show-alert" expand="full">Show alert</ion-button>
		</ion-content>
	</ion-app>
	
	<ion-alert-controller></ion-alert-controller>
	
	<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
	
</body>
</html>

JavaScript

const btn = document.querySelector('#btn-show-alert');

btn.addEventListener('click', () => {

	/*const alertController = document.createElement('ion-alert-controller');
	document.body.appendChild(alertController);*/
	
	const alertController = document.querySelector('ion-alert-controller');
	
	alertController.componentOnReady()
		.then(() => {
			
			alertController.create({
				message: 'Ionic 4 alert',
				buttons: ['Cancel', 'Ok']
			}).then(myAlert => {
				myAlert.present();
			});
			
		});
		
});