Blog Details

import { LightningElement, api } from ‘lwc’;

export default class ChildComponent extends LightningElement {
@api message;
}

childComponent.html

<template>
    <div>
        <p>Message from Parent: {message}</p>
    </div>
</template>

In this example:

• The ChildComponent has a public property message.
• The @api decorator makes message accessible from the parent component.

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    parentMessage = 'Hello from Parent!';
}

parentComponent.html

<template>
    <c-child-component message={parentMessage}></c-child-component>
</template>

In this example:

• The ParentComponent defines a property parentMessage.
• The message property of the ChildComponent is set to parentMessage using data binding.

Example 2: Public Methods

Public properties are not limited to simple data. You can also expose methods to be called by the parent component.

childComponent.js (with method)

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api message;

    @api
    updateMessage(newMessage) {
        this.message = newMessage;
    }
}

In this example:

• The ChildComponent has a public method updateMessage that updates the message property.

parentComponent.js (calling method)

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    parentMessage = 'Hello from Parent!';

    handleChangeMessage() {
        this.template.querySelector('c-child-component').updateMessage('New Message from Parent!');
    }
}

parentComponent.html (with button)

<template>
    <c-child-component message={parentMessage}></c-child-component>
    <button onclick={handleChangeMessage}>Change Message</button>
</template>

In this example:

• The ParentComponent has a method handleChangeMessage that calls the updateMessage method of the ChildComponent.
• A button is provided to trigger the handleChangeMessage method, demonstrating how the parent can control the child component’s behavior.

Example 3: Advanced Public Property with Getters and Setters

You can also define public properties with custom getters and setters to add logic when the property is accessed or modified.

childComponent.js (with getter and setter)

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    _message;

    @api
    get message() {
        return this._message;
    }

    set message(value) {
        this._message = value.toUpperCase();
    }
}

In this example:

• The message property is defined with a custom getter and setter.
• The setter transforms the message to uppercase before storing it.

Conclusion

Making properties public in LWC is a fundamental technique for enabling component communication and reusability. By using the @api decorator, you can easily expose properties and methods to parent components. This allows for flexible and maintainable code, where components can be reused and configured as needed.

Final Thoughts

Understanding how to define and use public properties will significantly enhance your ability to build sophisticated and interactive Salesforce applications. Experiment with these examples, try creating your own, and see how public properties can simplify your component interactions.

Feel free to reach out if you have any questions or need further clarification on any of the concepts covered in this blog. Happy coding! 🚀