Angular 2 - How to add (click) event to dynamically added div [duplicate] - javascript

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
}

Related

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

How To Call Different Function on React Nested Div onClick Event? [duplicate]

This question already has answers here:
How can I prevent event bubbling in nested React components on click?
(10 answers)
Closed 11 months ago.
I have a nested div in react like this:
<div onClick={() => fn_01()}>
<div onClick={() => fn_02()}>
</div>
</div>
I want to call different function when user click those div. But when I click the 1st div it called fn_01() and when I click the 2nd div it also call fn_01(). How can I solve this issue.
I am using functional component in my react project. I also implement Class component and call those method using this., which doesn't work also. I need this work in Functional Component
The solution was to place a call to event.stopPropagation() in your child onClick method. This will prevent the parent from being called.

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>

JavaScript - adding a class to a child of a button

I'm trying to work out how to add a class to a child element of a button, specifically to the <i> below:
<button><i class="icon-undo"></i> Undo</button>
Ideally, using plain JavaScript, there'd be a function which can be added to the button (i.e. <button onclick="function()">) which would add the class "icon-spin" to the child <i> of whatever element was clicked (so it could be used in multiple places in the same page).
Maybe the code in this question helps.... posted the answer today itself. Just pass 'this' to the function and you could do wonders to the DOM thereafter
get nearby sibling in javascript

Categories

Resources