Access apex class property in lightning component

In this post i will tell you how you can access apex class property in your lightining component .

So First create a Lightinig component here our lightining component name  is showDetails

• showDetails : This component is use to show details of user like name , phone and other variables or properties.
• showDetailsController.js :  JS Controller for show details component. in doinit method of js controller we call our controller method and set attribute on component.
• showDetailsController : Apex Controller Class in  this class we have three property  variables named : Name,Phone, Acclist with @AuraEnabled annotation.The @AuraEnabled annotation enables client- and server-side access to an apex controller method and controller property. Providing this annotation makes your methods and properties available to your Lightning components. There is also one method.
• showDetailsApp: This is the app in which we embed our lightining component.

Below is the code :

showDetails : Lightining component.

<aura:component controller="showDetailController ">
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="showDetailsController" type="classController"/>
 
<!--access apex class Property with Controller attribute-->
  <div style="border:1px solid black; padding:18px; background-color:lightgreen">
    <li> User Name :  {!v.showDetailsController.Name} </li>
     <li>User Phone :  {!v.showDetailsController.Phone} </li>
  </div>
  <div style="border:1px solid black; padding:18px; background-color:lightblue">
       Account list-:
    <aura:iteration items="{!v.showDetailsController.Acclist}" var="oAcc">
       <li>{!oAcc.Name}</li>
    </aura:iteration></div>
</component>

showDetailsController.js : Js Controller

({
      doInit : function(component, event, helper) {
     //call apex class method
    var action = component.get('c.initClass');
        action.setCallback(this,function(response){
    //store state of response
   var state = response.getState();
       if (state === "SUCCESS") {
    //set response value in objClassController attribute on component
     component.set('v.objClassController', response.getReturnValue());
       }
   });
      $A.enqueueAction(action);
    },
})

showDetailsController  : Apex Class contorller 

 
public class showDetailController {
// create properties in apex class
 @AuraEnabled public String DeveloperName {get;set;}
 @AuraEnabled public integer DeveloperAge {get;set;}
 @auraEnabled public List<account> lstOfAccount{get;set;}
 
@AuraEnabled
  public static showDetailController initClass(){
     //create class instance
  classController obj = new classController();
     //set value in class properties
   obj.name= 'Himanshu';
   obj.Phone= '67676775757' ;
 
   // query accounts list for lstOfAccount property
   obj.lstOfAccount = [select id,name from account LIMIT 10];
 
   // return class instance
   return obj ;
   }
}

showDetailsApp  :

<aura:application >
  <c:ShowDetails />
<!-- here c: is org. namespace prefix-->
</aura:application>

Hits: 1125