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).
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
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
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
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