function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
balakumaran Ramanujambalakumaran Ramanujam 

how to call a apex method when the button clicked in LWC

Maciej Król 28Maciej Król 28
mukesh guptamukesh gupta
Hi Ramanujam,

Please use below code:-

    <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}>

displayContactsOnButtonClick.js-meta.xml :-
<?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;

    handleGetContacts(){  // button click event 
        getContactList() // Apex class method
        .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];

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.