Develop Reference

Angular assing attribute to all child elements?

I have a custom component in angular that i re-use everywere in my app. This is a button component and i call it like this where i want to use it: <app-delete-btn></app-delete-btn>
I want to set the attribute tabindex="1" to my component but it does not work.
This attribute gives a TAB order to specific html elements.
Upon inspecting this strange behaviour, and as of my understanding, tabindex works but you have to specify it for the parent and ALL the child components
So i did this and it worked:
Upon declaring my custom component in my html <app-delete-btn tabindex="1"></app-delete-btn> i gave him the tabindex
and then i had to add it in the app-delete-btn.ts button inside the component <button tabindex="1">Delete</button>
The problem is that i may re-use that button therefore i can't add the tabindex from within the component itself otherwise is going to apply everywhere i use it.
Finally my question is:
Is there a way when calling <app-delete-btn></app-delete-btn> to assing a tabindex property to all of it's childrens (and by childrens i mean the button delcared in the html of the component)?

Add this to your button :
#HostBinding('attr.tab-index')
tabIndex = 1;
This should do the exact same thing as this
<app-delete-btn tabindex="1"></app-delete-btn>
But automatically

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

Accessing the DOM in the Vue Mounted function

How do I access an element from within the mounted function in a VueJS instance.
When I try the following, it tells me that the element is undefined. When I see the DOM it is there. Could this be a case where the element is not rendered before I try to reference it?
document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});

You get a HTMLElement instance when you call your Vue.js instance with $el. Check the API.
Example
let allLinks = this.$el.querySelectorAll('a')
Alternatively, you could use a ref. This is a like a programmatic ID. Also check the API.
Example
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

You can just use v-on:change or #change to bind your event listener so that you can avoid manipulating DOM element. Besides, Vue.js is to make you not to DOM as far as possible

How to convert React element to dom element

I need to create an HTML element and provide it to some third-party component.
const testElement = <div ref='myself' className='test-label'>Hello (React) HTML element!</div>
thirdParty.addElement(testElement)
In the above I create the element with React, but passing it on as said raises an error, obviously because it's a React element and not a native DOM element.
Is there a way to convert testElement to a DOM element?
That said, I'm looking for a solution that will retain event handlers etc' associated with the component, so simply converting to HTML (ReactDOMServer.renderToString(testElement)) doesn't cut it.
-
Edit regarding duplicate:
The other one discusses about the HTML string. I need the object along with its event handlers etc'.

Try (ReactDOM.render(textElement, thirdParty))
https://facebook.github.io/react/docs/react-dom.html#render

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.