Empty check in LWC html

Question

How to do empty check like we used to do in Aura bundle

<aura:if isTrue="{!not(empty(v.opportunityList))}">

I have a datatable in the lwc and want do display a message when no data to display Here my code: HTML:

<template>
<template if:true={parameters.data}>
<!--lightning datatable-->
    <lightning-datatable 
        key-field="id"
        data={parameters.data}
        onrowaction={handleRowAction}
        row-number-offset={rowOffset}
        hide-checkbox-column="true"
        columns={columns}></lightning-datatable>
</template>     
<template if:false={parameters.data}>
    No existing Contacts to display
</template>   
</template>

JS:

import { LightningElement, wire, track, api } from 'lwc';
//import method from the Apex Class
import fetchMatchingContact from '@salesforce/apex/DisplayContact.fetchMatchingContact';

// Declaring the columns in the datatable
const columns = [
                    {
                        label: 'Name',
                        fieldName: 'Name'
                    },
                    {
                        label: 'Phone',
                        fieldName: 'Phone'
                    },
                    {
                        label: 'Email',
                        fieldName: 'Email'
                    }
                ];
export default class DisplayExistingContact extends LightningElement {
    @api recordId;
    @track columns = columns;
    @track record = {};
    @track data = {};
    @track parameters;
    @wire(fetchMatchingContact, {leadId: '$recordId'}) 
    parameters;
}

Answer 1

What you are doing looks about right. However, since you are using "parameters.data" and want to track a change in parameters.data, you need to change the way you initialize the tracked value, like:

@track parameters = { data: undefined };

By using the inline object definition in the initializer for this tracked property you direct the LWC compiler to actually look for changes to the parameters.data value (not just the parameters itself), and such a change should happen when the fetchMatchingContact wire is itself invoked.

If your template were to use just the "data" tracked property, something sat unused in your example code, you could do this by changing the wire, thus:

@wire(fetchMatchingContact, { leadId: '$recordId' })
handleParameters({data, error}) {
    this.data = data;
}

Here, once the wire completes the this.data property is updated and, this being tracked, the relevant parts of the template will be re-processed to reflect the new data.

Answer 2

The way I handled this was using a Boolean variable that gets set to true in JavaScript if object is not empty.

if(Object.keys(parameters).length === 0 && parameters.constructor === Object){
    //if object is empty
    this.booleanVar= false;
}
else{
   this.booleanVar= true; 
}

Then using this Boolean variable on html:

<template if:true={booleanVar}>
</template>