EDIT
To show/hide the child component based on field value dynamically based on fields. Follow the below steps.
Update JS with below code
Define one attribute named fieldsData
like
fieldsData = [];
handleOnLoad(event) {
const fValue = event.detail.records[this.recordId].fields.Industry.value;
this.fieldsData = [];
for (let [key, data] of Object.entries(event.detail.records[this.recordId].fields)) {
console.log(JSON.stringify(data));
this.fieldsData.push({fieldApiName: key, ...{data}});
}
}
In HTML use the below code to show/hide your child component. This code will show the child component only if there is a value in the field.
<template if:true={fieldsData} for:each={fieldsData} for:item="field">
<c-child-lwc key={field.fieldApiName} if:true={field.value}>
</c-child-lwc>
</template>
Use lightning-record-edit-form/lightning-record-view-form
so the fields don't render by default, and you have freedom to show/hide the fields.
Before Edit