Develop Reference

Passing to child component an event handlers within slot in vue 3

I created a couple of reusable components with a slot within it. So I can manage the content, style, or whatever it is anytime I call it, in other components. I wonder, can I passing an event handler to
those components but inside the template tag?
ReusableComponent
<a :href="hrefProps"> // I want the handler goes here
<slot></slot> // it will render plain text, without html tags
</a>
Main Component
<reusable-component>
<template #click="sayHelloWorld">Hello World!</template> // didn't work
</reusable-component>
How can I make that to work? Should I wrap them into at least 1 tag, like
<template><a #click="sayHelloWorld"></a></template> // sure it will working

Template tags don’t create a DOM element, so pi can’t add a listener to them, or add a class or anything else.
They are just a semantic tool to wrap multiple children in a loop.
Add the listener to the real parent element i-e href tag

Getting The Source Element From Click Event Handler In Angular

I am still new to Angular and I'm struggling to get the DOM Element of an Angular Click Listener.
What I have is the following component HTML:
<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">
<div class="menuItem__top" (click)="itemClicked($event, !!menuItem.submenu)">
<!-- Additional divs inside... -->
</div>
</div>
I would like to toggle a class of "menuItem__top" when it is clicked. My approach was to use a click event listener but I can't get the source Element to apply the class on.
itemClicked(event, hasSubmenu){
console.log(this) //is the component
let target = event.target || event.srcElement || event.currentTarget;
if(hasSubmenu){
console.log(target);
}
}
It could be done by getting the target of the $event but this way I would need to check the target and move with closest(".menuItem__top") up to the correct source element.
Is there an easy way in Angular to pass the source element of the click listener to the click function or a way to get it inside the click function?
In vanilla JS it would be as easy as using "this" inside the click function, but in Angular this is bind to the component. (In this case, it would be ok to loose the binding to the component if this is the only way.)
I thought about two ways:
Assigning a dynamic reference containing some string and the itemId, passing the itemId and retrieving the reference object based on the itemId in the listener.
Using a #HostListener to listen on every "menuItem__top" click and toggling the class every time.
What do you think is the best way? I feel like I am missing something simple here.

Go the other way around. People are used to jQuery and the way it works (selecting elements already present in the DOM, then adding them a class). So in Angular, they try to do the same thing and grab the element that was clicked, to apply it a class. Angular (and React and others) work the other way around. They construct the DOM from data. If you want to modify an element, start with modifying the data it was generated from.
This <div class="menuItem__top"> that you click on is constructed from let menuItem. All you have to do is add a property, say "isClicked" to menuItem.
<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">
<div class="menuItem__top"
[class.isClicked]="menuItem.isClicked"
(click)="menuItem.isClicked = true">
<!-- Additional divs inside... -->
</div>
</div>

React Contenteditable - how can I assign an onClick to a <span> in react-contenteditable?

Is there anyway I can use something like this:
<span onClick={(e) => console.log(e)}>Testing</span>
Inside react-contenteditable to handle the click on Testing keyword?
When I use the html prop, it would only take an html string, something like <span onclick="something()"></span> I suppose, but is there a way to do it in react instead?
And if I use <span onclick="something()"> where should I define this function something()? I suppose at this point I won't have access to the functions defined in react, right? So how should I do this?

onClick is a React property so react-contenteditable wouldn't know what to do with it - since html expects plain html
A hacky way to achieve what you want - or pretty close to it - is:
Create an onClickContentEditable function and is it as onClick for ContentEditable
Add an innerRef to ContentEditable
in onClickContentEditable, then the clicked element is ContentEditable do nothing - since we want to interact only with the children of ContentEditable
Based on DOM attributes of the clicked element (tagName, className ...etc) fun with it! :)
In onClickContentEditable you can check the DOM attributes of the clicked element and take action accordingly.
You could create a class to mark the element you want to click.
You can test this implementation here - the sandbox is forked from the complex react-contenteditable example. I logged the interactions in the console.
Hope it helps!

You cannot assign any React DOM events on children of the react-contenteditable component, because internally it converts all the children to plain HTML string via dangerouslySetInnerHTML React prop:
https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.tsx#L53
All React bindings will be lost once the node is rendered

ReactJs - trigger click on element with class

This is generated element by the plugin
<span class="leaflet-draw-draw-polyline">...</span>
I want to click on an element from some other part of the code.
How can I trigger click on this element without using ref on it?

Since the element seems to be completely out of a React component's scope, you could try either of the following:
create a React component and use refs
simply use document.getElementsByClassName() and .click()

Jquery Toggle on click of image

I am trying to understand how the jquery toggle works. I want to toggle to next anchor with class plr-anchor on click of image with class go_down. The data is populated using maps.
Jquery code:
$('.go_down').on('click',function(e){
#('.plr-anchor').next('.plr-anchor').toggle()});
}
Code snippet:
{data.map(function(categ) {
return <div>
<a className="plr-anchor" id={categ.short_name}></a>
<img src="/static/img/icon_up.png" className="go_down"/>
</div>}.bind(this)}
There seems to be a problem with the syntax on the Jquery call function. I am newbie with Jquery, any help will be great. Thanks in advance.

You have used # instead of $ inside click handler. Also you need to find exact plr-anchor which is before the clicked image. Right now you are toggling all plr-anchor.
For dynamic elements, use $(document).on(event, selector, function(){}); for binding click handlers. See below code
$(function(){
$(document).on('click','.go_down',function(e){
$(this).prev('.plr-anchor').toggle();
});
});

Your jQuery code has a "#" instead of a "$". By the way, React and jQuery don't always go together. The whole purpose of React is to use virtual dom and let React take care of dom updates. While jQuery is mostly about direct dom manipulation. What you are trying here will interfere with React because it won't expect the dom to change without the v-dom changing.
Ideally, you should be using event handlers and state in your component to toggle visibility.