You need to sign in to do that
Don't have an account?
Ilavarasi 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?
On Clicking one of the Menu List Item, I need to Show the Another component.
How to achieve this?
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