Call apex method on init and edit properties

Question

sorry for my bad english. I have two lwc components, parent and child. Child components have two @api properties passed from parent. I want to call apex method when component is inserted into dom and, after this, when one of two properties change value from parent. On Aura component there was a change handler on attribute that re-call the apex method. How to achieve this on lightning web component?

Thanks for you reply

Edit: Parent.html

<template>
   <lightning-input onchange={handleParam1}></lightning-input>
   <lightning-input onchange={handleParam2}></lightning-input>
   <c-child param1={param1} param2={param2}></c-child>
</template>

Parent.js

value;
valueProcess;

handleChange(event) {
    this.value = event.detail.value;
}

handleChangeProcess(event) {
    this.valueProcess = event.detail.value;
}

}

Child.html

<template>
 <lightning-combobox
  name="completion"
  label="Mode"
  value={value}
  options={options}
  onchange={changeMode}>
 </lightning-combobox>
</template>

Child.js

@api param1;
@api param2;
options=[];

connectedCallback() {
  //call apex method
  init({param1:this.param1, param2:this.param2}).then(result => {
    this.options = result.options;
  }).catch(error => {

  });
}

Answer 1

To execute logic each time a public property is set, write a custom setter.

If you write a setter for a public property, you must also write a getter. Annotate either the getter or the setter with @api, but not both. It’s a best practice to annotate the getter.

Check below example, expose your public property as getter and use a setter to execute the logic you want. uppercaseItemName is a private property which holds the value passed by parent and set by the setter.

import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
    uppercaseItemName;

    @api
    get itemName() {
        return this.uppercaseItemName;
    }

    set itemName(value) {
       this.uppercaseItemName = value.toUpperCase();
       //call your apexmethod here
    }

}

and pass the value from a parent like this:-

<c-child item-name={fieldValue}></c-child>

Check the full example here:-

1. VALUE CHANGE HANDLER IN LIGHTNING WEB COMPONENT WHEN PARENT PASSES VALUE TO CHILD
2. Use Getters and Setters to Modify Data