Ad Code

Call apex method on button click in lwc

Call apex method on button click in lwc

Find steps to call apex method on click of a button in the salesforce lightning web component framework.

  1. displayContactsOnButtonClick.html – to display a button on the user interface
  2. displayContactsOnButtonClick.js-meta.xml – to define metadata values for a component
  3. displayContactsOnButtonClick.js – client-side logic to get records from server and display
  4. LwcController.cls – server-side logic to retrieve records


    <lightning-card title="Display Contacts on click Of Button" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Get Contacts" onclick={handleGetContacts}></lightning-button>
           <template if:true={contacts}>
           <template for:each={contacts} for:item=cont>
                <h4 key={cont.Id}>{cont.AccountId}</h4>
                <h4 key={cont.FirstName}>{cont.FirstName}</h4>
                <h4 key={cont.LastName}>{cont.LastName}</h4>
                <h4 key={cont.Email}>{cont.Email}</h4>             
           <template if:true={error}>


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">


import {LightningElement,wire,track} from 'lwc';
import getContactList from '@salesforce/apex/LwcController.getContactList';
export default class DisplayContactWhenButtonClick extends LightningElement {
    @track contacts;
    @track errorMsg;

        .then(result =>{
            this.contacts = result;
        .catch(error =>{
            this.errorMsg = error;


public with sharing class LwcController {
// Retrive list of contact list
    public static List<Contact> getContactList() {
        return [SELECT Id,AccountId, FirstName,LastName,Email,Phone FROM Contact limit 10];

User interface

Lightning web component with a button

Display records on click of a button

Lightning web component with a button and records

You may also like

Post a Comment


  1. Hi

    Thanks for the information.

    Just one question, why have you (in displayContactsOnButtonClick.js), imperatively called apex as well as used the wire decorator. Sorry, I am a beginner so I might be wrong, doesn't both of them used to do fetch data from Apex. Couldn't ( and why?) this work just with the imperative call.


    1. Hi Deepanshu, Thanks for checking and adding your inputs here.

      That's right, only imperative method is needed to get records on click of a button. Wired method fetches the records on load, I have removed that piece of code as it is out of context for this post. and also made some changes to the code as this was written a while ago.

      Please let me know if any issues while trying this code. Thanks.