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
Related
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
I have the following
<custom-component>
<div slot="form">
<form>
bunch of input elements
<span slot="inner"> <button type="submit" id="submitButton"></button> </span>
<button type="Reset"></button>
</form>
</div>
</custom-component>
How do I listen to on click event the button type submit from the parent component custom-component?
For reasons that I'm not going to to into, making the whole slotted form a component is not an option.
In the custom component file, this is what I tried
<slot name='form' >
<slot name='inner' #click=${this.handleSearch}> </slot>
</slot>
It seems like you'll need to change a few things to make this work as intended.
First, the "inner" slot in your example isn't doing anything. You can't have a nested slot inside of light DOM rendered slot children. To test this out to see that this is true, you can try two things.
Remove the <slot name="inner"> element, and you'll see that the "Submit" button still renders just fine in HTML.
Second, the #click listener on the <slot name="inner"> never fires. Try moving it to the <slot name="form"> and you'll see that the callback fires as expected.
Another issue you'll run into is that the default browser Event being bubbled through the shadowRoot doesn't contain any information. If you console.log the data in the event callback, you'll see that all you get is {isTrusted: true} instead of the more useful event and element information.
Since you can't create the form within the web component, the other option is to just handle all of the logic with JavaScript in a <script> tag next to your <custom-component> in HTML. This makes sense since this is closer to the intended use of slotted children - to be able to add arbitrary HTML as children to your web components, but your web component isn't necessarily in charge of anything related to that HTML, it's just rendering it.
If you need to be in charge of the rendering, events, or logic related to the HTML children, they should be inside the web component, or else the logic needs to be handled outside of the web component.
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
I have the template like this
<template>
<div>
<div id="hiddenElement">
<MyElement v-for='...' #click="...">
</MyElement>
</div>
<div id="appendElementsHere" />
</div<
</template>
The user can append the element into the list, so I have some function like this:
someFunc(){
const hidden = document.querySelector('#hiddenElement')
const target = document.querySelector('#appendElementsHere')
target.innerHtml += hidden.outerHtml
}
The element is cloned can append to the #appendElementsHere successfully,
but the click function is not working. I think that maybe the click function in the vue element, not the html. How can I clone the element as vue-element, not html only? Or any idea to create vue element in the script (method) and then append to the dom ??
What you're doing is technically correct from a javascript perspective, however the click function doesn't work because you're not doing any data bindings after you "clone" the elements. I say "clone", because what you're doing is just passing a bunch of strings containing HTML. With that said, what you will have to do next is to add the event listeners to the cloned elements manually as well.
However, you could try to do it in a more Vue way, so instead of having a hidden component waiting to be cloned, you could create the Vue instance of the component you want (MyElement in your case) with code passing all the props/data you want and then append it to the element where you need it.
Here's an example with how to do it with buttons. If click on "Click to insert" you'll see how a CustomButton component gets appended to the right of the button.
Thanks,
This question already has answers here:
Angular2 - catch/subscribe to (click) event in dynamically added HTML
(2 answers)
Closed 5 years ago.
I try to append a div into my page via a function in my component like this :
showTile($event: any,id: number){
$($event.target).append('<div (click)="somefunction(id)"></div>'))
}
somefunction(id :number){ console.log(id) }
The div has been appended by somefunction is not handled, in angular js 1.x I used to work with $compile.
You should not use jQuery to affect the DOM tree when your application works with Angular2. There is always a way to avoid this kind of the anti-pattern.
If I understand properly, you want to append the div on every click on the element. Why don't you create another component for this? In template, use *ngIf directive in order to show/hide additional content and bind click event to #Component, which will toggle boolean property. Then in parent component just use this component as many as you want. If these child components are specific and needs information, which are available in parent component, just #Input them. If you want to invoke parent component function, you could use #Output in child and then - invoke parent function.
There you can read a lot about this - https://angular.io/docs/ts/latest/cookbook/component-communication.html
Inside component.html file
<div *ngIf="condition" (click)="dosomething(data)">
<label >Click here </label>
</div>
//You div will appear only if condition is true
Inside component.ts file
dosomething(item){
console.log(item);
//do something here
}