function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Santosh Borfalkar 15Santosh Borfalkar 15 

navigate from one Lightning component to another component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
    
    <aura:attribute name = "AmazeKart" type = "string" default = "AmazeKart"/>
    <aura:attribute name = "Computers" type = "string" default = "Computers"/>
    <aura:attribute name = "Mobiles"   type = "string" default = "Mobiles"/>
    <aura:attribute name = "Watches"   type = "string" default = "Watches"/>
    <aura:attribute name = "Cart"      type = "string" default = "Cart"/>
   <!-- <aura:attribute name = "pageReference" type = "object"/>
     <aura:handler name= "init" value = "{!this}" action= "{!c.doInit}"/>
     -->
    
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="amazeKart"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">{!v.AmazeKart}</h1>
                
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    
    <div class="slds-box slds-theme_shade slds-theme_alert-texture">
        <div class="slds-grid slds_align-center">
            
            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p> <lightning:button label="Computers" class ="slds-m-top-medium" variant="brand"
                                              onclick="{!c.handleClick}"/></p>
                    </div>
                </span>
            </div>
            
            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Watches" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>
                        
                    </div>
                </span>
            </div>
            
            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p>
                           
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Mobiles" value= "Navigate" variant = "brand" onclick="{!c.handleClick}"/>
                        </p>
                    </div>
                </span>
            </div>
            
            <div class="slds-col slds-size_1-of-6">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Cart" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>
                        
                    </div>
                </span>
            </div>
        </div>
    </div>
</aura:component >
  
({
    handleClick : function(component, event, helper) {
       var navService = component.find("navService");
        var pageReferenceNav = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__mobiles',
            },
            state: {
                "myAttr": "attrValue" 
            }
        };
        pageReference.navigate(pageReferenceNav);
     },
   
    
})

Please help me with above issue
NitishNitish
Hi Snatosh,

I dont think above code gonna work for navigation of one lightning comonent to another., instead you should try the below code in your controller. 
({
    handleClick : function(component, event, helper) {
     /*  var navService = component.find("navService");
      var pageReferenceNav = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__mobile',
            },
            state: {
                "myAttr": "attrValue" 
            }
        };
        navService.navigate(pageReferenceNav);*/
        
        var evt = $A.get("e.force:navigateToComponent");
    	evt.setParams({
        componentDef : "c:mobiles",
        
    	});
    	evt.fire();
     },
   
    
})
If this helps kindly mark it as solved so that it may help others in future.

Thanks,

Nitish