+ Start a Discussion
Ilavarasi SrinivasanIlavarasi Srinivasan 

Want to develop the two components in which one component like "Menu List". On Clicking one of the Menu List Item, I need to Show the Another component.

I am new to Lightning.. I want to develop the two components in which one component like "Menu List". 
On Clicking one of the Menu List Item, I need to Show the Another component.
How to achieve this?
Siva SakthiSiva Sakthi
Hi Ilavarasi,

Refer this link via Event we can able to get these functionality.
Event Example :   http://bobbuzzard.blogspot.in/2015/05/lightning-component-events.html
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_intro.htm


Hope this will help you:

Apex Class:
----------------------
public class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        List<Contact> contacts = [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact Limit 25];        
        return contacts;
    }


Event:
-------------------
<aura:event type="APPLICATION">
    <aura:attribute name="contact" type="Contact"/>
</aura:event>

Component 1:
--------------------
<aura:component >
    <aura:attribute name="contact" type="Contact"/>
    <ui:outputText value="{!v.contact.Name}" click="{!c.select}"/>
</aura:component>

Controller. js
------------------------- 
({
    select : function(component, event, helper) {
         var contact = component.get("v.contact");
        console.log("contact: " + contact);
        var selectEvent = $A.get("e.c:selectContact");
        selectEvent.setParams({ "contact": contact }).fire();
    },
})

List Component 2:
-------------------------------
<aura:component controller="ContactController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="selected" type="string"/>
     <aura:handler event="c:selectContact" action="{!c.getContact}" />
    <ul>
    <aura:iteration items="{!v.contacts}" var="contact">
        <li><c:listItem contact="{!contact}" /></li>
    </aura:iteration>
    </ul>    
    <ul>              
        <li>You have Selected : <b>{!v.selected}</b></li> 
    </ul>
</aura:component>

Controller.js
--------------------------

({
    doInit : function(component, event, helper) {
        // Load all contact data
        var action = component.get("c.getContacts");
        var self = this;
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.contacts", response.getReturnValue());
            }
            else {
                alert("something has gone wrong");
            }
        });
     $A.enqueueAction(action);
    },
    
    getContact : function(component, event, helper) {
       var selected = event.getParam("contact");
        console.log(selected);
        var arr = component.get("v.selected");        
        component.set("v.selected", selected.Name);
    }
})

Thanks
Siva