[SalesForce] How to open Lightning carousel image href link in new tab

I have a carousel component, when we click on image it should open in new tab. But with standard functionality it is opening in same window. I tried using onclick function but it is not working. How to pass url value from component to java script controller?

<lightning:carousel disableAutoScroll="false">
                    <aura:iteration items="{!v.recordList}" var="l">
                        <lightning:carouselImage src = "{!l.image__c}" 
                        header = "{!l.Header}" description = "{!l.Description}" 
                        alternativeText = "{!l.AlterText}" onclick={!c.onClick} id="{!l.imgurl__c}">
                        </lightning:carouselImage>
                    </aura:iteration>
                  </lightning:carousel>

Controller.js:

onClick: function(component, event, helper){
alert('onclick called'); // this is working
var urlval = event.target.Id;// this and window.open is not working
window.open(urlval, '_blank');
}

Best Answer

Since it is not HTML element, and it is lightning base component, it will expose only secured versions and so event.target or event.currentTarget May not always give the element. lightning:carouselImage is not exposing the target directly.

  1. To get the element you should use event.getSource() .
  2. Also, you should get id and not Id

You can use below method:

onClick : function(component, event, helper) {
    var urlval = event.getSource().get("v.id");
    window.open(urlval, '_blank');
},
Related Topic