Develop Reference

Using Alpine.js x-on events on Astro.js component

I'm trying to build some simple stuff with Astro.js for HTML templates and Alpine.js for interactivity when needed. I stumbled upon problem of trying to use Alpine x-on events on Astro component
Here is sample usage of the Button component:
<div x-data>
<Button #click="console.log('Clicked astro')">Click me</Button>
<button #click="console.log('Clicked normal button')">Click me</button>
</div>
The first one doesn't work while the native button works as normal.
Button component is just a button element with some tailwind classes, nothing fancy:
<button class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent">
<slot />
</button>
How can I get it to work? I really love astro with alpine so far but this little thing is stopping me from using it for my project.
I tried various of different things but none of them worked really. I went through docs and couldn't find anything related to my issue - it feels like there must a simple solution but I'm missing something.

I have reached out to Astro support on discord and it was answered by user happydev there:
Anything passed to an astro component like this is taken as a prop, so you need to pass it to the element you want to bind the event on
Something like this
//Button.astro
---
const {"#click": click} = Astro.props
---
<button #click={click}>
<slot/>
</button>

Button doesn't work inside vaadin-grid (javascript)

I have a button in a vaadin grid that I want to open a link in a new tab, but it doesn't work inside the grid. I tested the code outside the grid, and it worked there. Everything is done using Lit.
Here's part of the code:
<vaadin-grid-column resizable="" path="action" header="Action">
<template>
<button #click="${this._openTab()}"Test</button>
</template>
</vaadin-grid-column>
The _openTab function:
_openTab(e){
window.open("https://google.com", "_blank");
}

How can I use VueJS in HTML that is injected after the page is loaded?

We're migrating a legacy front-end to VueJS 2. So far, it's using HTML and JS to fetch modals and inject those in the DOM. We'd like to migrate one specific (and very simple) modal.
That modal is a reset password modal. It is, for now, fetched from the login modal using the legacy logic (which is a native onclick call). We'd like the login modal to interact with VueJS and display the reset password modal.
But the problem is, when we originally load the HTML, the login modal is not in the DOM (until we display it). So it seems VueJS event handlers won't trigger at all.
How can I use VueJS in this login modal which is injected after the page is loaded ?
Here's some pseudo code to illustrate my question :
# OLD
// HTML
<!-- Button displaying the login modal -->
<button onclick="displayModal('login')">Log in</button>
<!-- Login modal (loaded only when user clicks the button) -->
<div>
<h1>Login</h1>
<button onclick="displayModal('reset-password')">Reset password</button>
</div>
// Native JS
function displayModal(name) {
var result = fetchModal(name);
removeCurrentModal();
injectModal(result);
}
# NEW
// HTML
<!-- Login modal (loaded only when user clicks the button) -->
<div>
<h1>Login</h1>
<!-- This doesn't do anything even though it works when it exists on page load instead -->
<button #click="modals.passwordReset.show = true">Reset password</button>
</div>

How to show/hide component on button click/hover in angular?

I'm implementing a toolbar where each route (nav buttons) I hover on will display a popover, similar to bootstrap, containing the component I send (kind of like the navbar items here).
<div *ngFor="let route of toolbarRoutes">
<button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">
{{route.displayName}}
</button>
<app-hoverable *ngIf="route.component" [component]="route.component"></app-hoverable>
</div>
My problem is that I want to render/show app-hoverable only if the button (<button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">) is hovered, how can i do this?

Simply like this (I have stacked attributes for readability) :
<div *ngFor="let route of toolbarRoutes">
<button mat-stroked-button
class="toolbar-nav-button"
(click)="routeTo(route.path)"
(mouseenter)="route.showHoverable=true"
(mouseleave)="route.showHoverable=false">
{{route.displayName}}
</button>
<app-hoverable *ngIf="route.showHoverable" [component]="route.component"></app-hoverable>
</div>

AngularJS 1.2 ngInclude inside ngIf

I'm running into some odd behavior when putting an ngInclude inside an ngIf or ngSwitch.
For example, take the following:
<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button>
<button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button>
<div ng-if="showIncTemplate">
<p>Included template:</p>
<div ng-include="'template.html'"></div>
</div>
<div ng-if="showInlineTemplate">
<h1>Inline Template</h1>
</div>
(http://plnkr.co/edit/gULbwnKb0gQS8DWz0V6U)
The buttons toggle an options to render the divs that follow. The inline example behaves as expected, with the content appearing or disappearing on click.
The div with the child include seems not to include the template when first drawn, but then includes it repeatedly on every subsequent redraw.
What's going on here? I do see some breaking changes around ngInclude, is there some other way I should be doing this? Or is this a bug in Angular?
Edit:
It looks like this is already in the angularjs github issue tracker:
https://github.com/angular/angular.js/issues/3627

They've fixed it in this snapshot:
http://code.angularjs.org/snapshot/