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

Get the newly created elements and assign onClick function or add click event

I've been trying to use MutationObserver. I can get it to report if any element has been added to the DOM, but I can't reference these elements. I need to apply certain functions to them.
Let's say I have this HTML:
<div id="main">
Some Links
Link 1
Link 2
Link 3
</div>
New links may be added to this DIV element when I scroll. What I need is to get these new link elements and reference them in Javascript.
Note that it's not the exact tree. It's possibly much more nested, not so basic. But the myLink classes are there.
Performance is a slight worry, compatibility is not.

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>

Jquery listener for clicking a class, but not working when clicking the icon inside it

First of all, I couldn't find this question over here, so I don't know if it has been answered yet.
I have a listener for all the clicks in my site, and then calls a function that checks if the target has the class "wave". If so, it displays a wave effect.
I have tiles with this class, and it works fine, except they have large icons, and if you click them, it does not recognise it as a target with the class.
I tried to put all the tiles inside a div with the class, but somehow it does not recognise it as a target with this class either (I'm assuming it recognize as clicking the target inside them).
I tried to put the 'true' at the end of the listener, in case the bubbling direction could help me, but it didn't.
Any idea? thanks in advance and sorry for my ignorance.
jsfiddle
<div class="tile-container">
<div class="tile efecteona">
<h3 class="titol-tile">Gràfics</h3>
<i class="fa fa-bar-chart tile-icon "></i>
</div>
</div>
"efecteona" would be "wave" class
https://jsfiddle.net/qtLvef8o/2/

As the other answers note, the target returns the actual clicked element which in this case is the icon and not the div with the class.
Since you use jQuery though, why not use its delegate syntax which allows for this ?
$(document).on('click', '.efecteona, button', addOnaEffect);
and set target = this inside your hander.
updated demo at https://jsfiddle.net/qtLvef8o/4/

When you are asking about the e.target it gets the i element, and the i element doesn't have the class you need and neither had the tagname button.
Add this console.log(target); next to your line var target = e.target; and you will see what I'm saying.

When you click an element the event bubbles all the way up to the document, while the target is always the element which initialized it. In your case, it seems that your code assumes the target is a tile element, while in fact it can also be the icon element.
Since you tagged on the question that you are using jQuery, there's a simple solution. Use jQuery closest method.
var target = $(e.target).closest('.efecteona, button').get(0);
Code example

The target is wrong is this case.
I tried to explain by resetting the target when it's the parent that has the class (a bit dirty, can be optimised / better written but it's just to explicitly show the target issue)
https://jsfiddle.net/OxyDesign/wbxvqt2b/1/

problem with event handlers in dojo

I have a span inside which i have a achor tag.For anchor tag , i have used DojoAttachEvent,Now somwhere in my code i replace innerHTML of span as show below.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction"> txt223 </a> </span>
Now i replace text of span as follows:
var tmptxt = dojo.byId("xyz").innerHTML
dojo.byId("xyz").innerHTML = "some more txt" +tmptxt
Now after running this code the function _myfunction doesnot get called when onmoveover gets triggered.
I know that i can get away with the problem by using two spans ,one for next txt and one for anchor , but due to some css issues(i get each span on new line,its some two colum css and if i use 2 spans txt and anchor come on 2 different line which we dont want) i cant do it.
I tried to use dojo.connect , but the problem is as my span is present in some wizard the event gets triggered when am on page other then the page which is the current page of wizard.

Try this code.it may helps.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction();return true;"> txt223 </a> </span>

First of all, if this isn't inside a widget template, dojoAttachEvent isn't what you want - you probably want something more like onMouseOver="_myfunction();".
Secondly, if you're replacing the innerHTML of the parent node of the node in question with the event, then naturally you're going to end up clobbering that node out of existence, and the event along with it, and you'd have to hook it up again one way or another. Is there a reason you can't be more careful with your DOM manipulation? Like, put an id on the a tag (or query for it from the span) and change only that node's innerHTML?