1

I have developed a Lightning App which included a component. Following is the Component screenshot, On click of Register Button its Insert a new contact and on click of Already register i want to redirect to a new component name login.

How to redirect from one component to another component in lightning salesforce ?

Component -

<aura:component >
<h1>Page Redirection Test</h1>
<div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Email</label>
    <div class="slds-form-element__control">
        <ui:inputEmail aura:id="email" class="slds-input" placeholder="[email protected]" />
    </div>
</div>
<div class="slds-float--left">
    <ui:button aura:id="alreadyRegister" label="Already Register" class="slds-button slds-button--brand" press="{!c.navigateToMyComponent}"/>
</div>

Controller JS

({
navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:LightningLoginC",
        componentAttributes: {
            email : component.find("email").get("v.value")
        }
    });
    evt.fire();
}

})

APP -

<aura:application extends="force:slds" implements="force:appHostable">
<!--<c:LightningLoginComp />-->
<c:LightningLoginC />

enter image description here

1 Answer 1

1

There is an event which is BETA and you may want to experiment with same

navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:myComponent",
        componentAttributes: {
            contactName : component.get("v.contact.Name")
        }
    });
    evt.fire();
}

In the above code componentDef holds the component where you want to navigate

and you can pass attribute values as well as you move along using componentAttributes

18
  • I am getting the following error - Action failed: c$LightningLoginComp$controller$navigateToMyComponent [Cannot read property 'setParams' of undefined] Commented Dec 15, 2016 at 11:24
  • Are you inside lightning container or vf container ? Commented Dec 15, 2016 at 11:29
  • Also share the updated code you are trying Commented Dec 15, 2016 at 11:30
  • Following is my Button inside component - <div class="slds-float--left"> <ui:button aura:id="alreadyRegister" label="Already Register" class="slds-button slds-button--brand" press="{!c.navigateToMyComponent}"/> </div> Following is the Controller JS - Commented Dec 15, 2016 at 11:31
  • 1
    you might also need to add: <aura:dependency resource="markup://force:navigateToComponent" type="EVENT"/> to the component Commented Dec 15, 2016 at 17:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .