Pass HTML reference in click function

#1

I am building a custom button from the ground up. This button, when clicked, should expand its height to reveal more options.

The function itself is not where I have trouble, I have already done this elsewhere successfully (adding/removing css classes). The difference is that this time there will be some number of these buttons (to be determined by data pulled from user account), so I cannot have a predetermined number of div IDs and functions to open/close the buttons.

I have anywhere from 5-10 of these same divs, and each needs to expand on click. I need to be able to pass a reference to the clicked div so that I do not have to write a separate function for each div button (considering there will be a non-determinant number of them).

#2

Answered my own question again! For those who might have the same:

HTML object -
div class=‘myclass’ on-tap=‘toggle($event)’></div

JS -
toggle(event: any) {
event.target.classList.add(‘openClass’);
}

So using the passed event and ‘.target’ returns the clicked object. In my case the click happens on a child of the desired button div, so I used .target.parentElement.classlist

#3

Hello,
maybe it is worth to take a look how custom components are created and used and also take a look to ngclass and ngstyle to style your custom components.

Best regards, anna-liebt

#4

Thanks anna!

Would this be best industry practice, even though this component is only used on one page?

I am fairly new to front end development and specifically angular, so I am not up on all of the best practices

#5

Hello,

if you use it on one page a custom component is not necessary. Using ngclass and ngstyle is good a practice with angular. Some advice was given me, was: Don’t manipulate the dom, if angular can do that for you.

Best regards, anna-liebt