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="abcd@gmail.com" />
    </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

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

  • I am getting the following error - Action failed: c$LightningLoginComp$controller$navigateToMyComponent [Cannot read property 'setParams' of undefined] – Nirmallya Ghosh Dec 15 '16 at 11:24
  • Are you inside lightning container or vf container ? – Mohith Shrivastava Dec 15 '16 at 11:29
  • Also share the updated code you are trying – Mohith Shrivastava Dec 15 '16 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 - – Nirmallya Ghosh Dec 15 '16 at 11:31
  • 1
    you might also need to add: <aura:dependency resource="markup://force:navigateToComponent" type="EVENT"/> to the component – Luke Inman-Semerau Dec 15 '16 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.