Call server side method Imperatively in LWC(Lightning web component)

Different ways to access server side controller method from LWC component

1. Wire a property
2. Wire a function
3. Call a method imperatively

1- Wire a property- 

    

This is already explained in my previous blog post. Those who want to revise or have not gone through previous post can go through this Link

2- Wire a function-

This is already explained in my previous blog post. Those who want to revise or have not gone through previous post can go through this Link

3- Call a method imperatively-

Calling a method imperatively means you control when the invocation occurs (for example, in response to clicking a button).When you call a method imperatively, you receive only a single response.

Now Let's take an example and understand it. In this we are going to create a component having Button and on click of button , we will fetch contacts record.

imperativeMethodExample.html

<template>

    <lightning-card title="imperativeMethodExample" icon-name="custom:custom63">

        <div class="slds-m-around_medium">

            <p class="slds-m-bottom_small">

                <lightning-button

                    label="Load Contacts"

                    onclick={handleLoad}

                ></lightning-button>

            </p>

            <template if:true={contacts}>

                <template for:each={contacts} for:item="contact">

                    <p key={contact.Id}>{contact.Name}</p>

                </template>

            </template>

            <template if:true={error}>

                <p errors={error}></p>

            </template>

        </div>

    </lightning-card>

</template>

imperativeMethodExample.js

import { LightningElement } from 'lwc';

import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ImperativeMethodExample extends LightningElement {

    contacts;

    error;

    handleLoad() {

        getContactList()

            .then((result) => {

                this.contacts = result;

                this.error = undefined;

            })

            .catch((error) => {

                this.error = error;

                this.contacts = undefined;

            });

    }

}

Adding the configuration file details so that you can expose the component in your org through app builder.

imperativeMethodExample.js-meta.xml-

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

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

ContactController.cls

public with sharing class ContactController {

    @AuraEnabled(cacheable=true)

    public static List<Contact> getContactList() {

        return [

            SELECT Id, Name, Title, Phone, Email

            FROM Contact

            WITH SECURITY_ENFORCED

            LIMIT 10

        ];

    }

}

Output when Button is clicked -

Thanks for reading and happy learning😃.

Stay tuned for next Post.

Keep sharing , keep learning.

CS- Dev Guide