My small app works great without Angular templating, but now I need to incorporate it. I want Sweet Alert to pop up when a button is clicked. However, nothing happens when the button is called from the template. I suspect it might be related to event binding since the app loads the code after the DOM has initialized.
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<form>
<button type="button" class="ticket_button">Book</button>
</form>
`
})
export class AppComponent {
//some app logic here
}
//index.html
//I haven't included normal header stuff here, but the my-app class shows the button
<html<body>
<my-app class="main_ticket">Loading...</my-app>
</body></html>
// I tried using event binding from jQuery $('.main_ticket').on('change', '.ticket_button', function() {//logic here}, but it didn't work either
<script>
//Sweet Alert call
document.querySelector('button').onclick = function(){
swal("Here's a message!");
};
</script>