My apology, there will not be a span class inside template. I have edited the code. And by the way, I have tried that method too. It's not working.

Actually, I am trying to pass the data in order to make the modal popup work. Here I am getting the modal popup through experience fragments.  First I created a template to show the modal popup. And I am passing the modal ID to match the experience fragment modal ID.  The code is given below   <temp...

Actually, I am struggling to implement if condition logic in a component. When I execute the below syntax, it is not working.<a href="#" class="${properties.modalBehavior == 'sideOverlay' ? 'side-overlay-link' : ''} ${properties.modalBehavior == 'sideOverlayTable' ? 'side-overlay-link' : ''} ${prope...

Yeah, you're right. I was using the entire code. By the way, MyCustomComponent doesn't exist that's the reason I was getting that error. 

@Shiv_Prakash_Patel It's not working. getting a different error."com.mysite.models.component.MyCustomComponent cannot be correctly instantiated by the Use API" Any other way to solve this issue?

Where would I give this node property -> ${item.fragmentPath} in the above code?

Thanks for your solution. It worked as expected.

Actually, I am not able to show the Experience Fragment through HTL from the Node Properties. When I include the below HTL in the HTML file, I am getting this error "org.apache.sling.api.request.RecursionTooDeepException:" <div data-sly-test="${item.innerBannerType == 'with-badges'}" class="badge-wr...

Actually, I need to get the multifield count in the component, and then I need to use that count in the HTL. Is there any way to get the multifield count?

Is this a good practice for big websites? or any other way to do this? Because if we are loading the entire scripts for a web page, where it only needed two scripts, then the performance might be affected.