Passing parameters to apex class from LWC with imperative method

Hi ,

I am going to explain how to pass two parameters into an apex class method using imperative method.

Apex Class:
public with sharing class CalculatorController {
    public CalculatorController() {

    }
    @AuraEnabled(cacheable=true)
    public static Integer calculate2Numbers(integer firstNumber,integer secondNumber){
     
        return (firstNumber+secondNumber);
    }
}

HTML File (Template):

<template>

   <lightning-card title="Calculator with apex class" icon-name="custom:custom63">

      <p class="slds-p-horizontal_small">

        <lightning-input label="First Number" name="fNumber" type="number"
value={fNumber} onchange={handledChange}></lightning-input>

        <lightning-input label="Second Number" name="sNumber" type="number"
value={sNumber} onchange={handledChange}></lightning-input>

        <lightning-input label="Result" type="number" value={resultsum}>
</lightning-input> </br>

        <lightning-button label="Submit" onclick={handleClick}>
</lightning-button>

       </p>

    </lightning-card>

</template>

Javascript File:

The below javascript file has example to invoke method from apex class:

Syntax:

import <nameofthemethod> from '@salesforce/apex/<apex class Name>.<methodName>'

import { LightningElement,wire,track} from 'lwc';

import calculate2Numbers from '@salesforce/apex/CalculatorController.calculate2Numbers';

export default class Calculatorwithapex extends LightningElement {

    fNumber;

    sNumber;

    @track resultsum;

    handledChange(event){

        if(event.target.name==='fNumber'){

            console.log('handle Change'+event.target.value);

            this.fNumber = event.target.value;

        }

        else if(event.target.name==='sNumber'){

            console.log('handle Change'+event.target.value)

            this.sNumber = event.target.value;    

        }

       

    }

    handleClick(){

        console.log('hi::button invoked'+this.fNumber+'--'+this.sNumber);

        calculate2Numbers({ firstNumber: this.fNumber,secondNumber:this.sNumber })

        .then(result => {

            this.resultsum = result;

            console.log('hi::'+result);

           // this.error = undefined;

        })

        .catch(error => {

            this.resultsum = undefined;

            //this.error = error;

        });

        

    }

   

   

   

}

Meta File (Configuration File):

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

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

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__Tab</target>

    </targets>    

</LightningComponentBundle>

Referece:
https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A