Can we open a lightning component in a new browser window or tab.
Basically I have a component where I open a component in a modal on click of a link. is it possible to open that component in new browser tab/window?
<b>{!v.userName}</b> Check on status by clicking <a class="link" onclick="{!c.modals}">here</a>.<br/>
opened modal :-
<aura:if isTrue="{!v.showModal}">
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large"
aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><h4>{!v.notification.Name}</h4></h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-wrap slds-m-around_medium">
<label><strong>Title</strong></label>
<div>{!v.notification.Name}</div>
<aura:if isTrue="{!v.notificationType =='Product Addition to Forecast'}">
<c:OP_BirthNotification/>
<aura:set attribute="else">
<c:OP_clickNotification/>
</aura:set>
</aura:if>
</div>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Close</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
is That OP_clickNotification could be opened in new tab?
EDIT:- I have Tried to generate the URL but it just gives undefined in console. I took the same example as given in the salesforce documentation :-
The component:-
<aura:component implements="force:hasRecordId,force:appHostable"
description="c:hello component">
<aura:attribute name="pageReference" type="Object"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:navigation aura:id="navService"/>
<aura:attribute name="url" type="String"/>
<lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>
Controller:-
init : function(component, event, helper) {
var pageReference = {
type: 'standard__component',
attributes: {
componentName: 'c__helloTarget',
},
state: {
"c__firstname": "John"
}
};
component.set("v.pageReference", pageReference);
},
handleClick: function(component, event, helper) {
debugger;
var navService = component.find("navService");
var pageReference = component.get("v.pageReference");
event.preventDefault();
navService.generateUrl(pageReference)
.then($A.getCallback(function(url) {
component.set("v.url", url ? url : defaultUrl);
}), $A.getCallback(function(error) {
component.set("v.url", defaultUrl);
}));
var url = component.get("v.url");
console.log(url);
}
c:OP_clickNotification
URL-addressable?