Render the table data based on each data condition in Lighting Web Component table

Question

I am able to do the conditional rendering on visualforce page

visualforce page:

<table id="tblContact">
    <thead>
        <tr>
            <td>Name</td>
            <td>Email</td>
            <td>Phone</td>
            <td>Type</td>
            <td>Profile ID</td>
        </tr>
    </thead>
    <tbody>
        <apex:repeat id="repeatContact" var="dt" value="{!contactList}">
            <tr id="datarow">
                <td>{!dt.Account.Name}</td>
                <td>{!dt.Email}</td>
                <td>{!dt.Phone}</td>
                <td>{!dt.Type} {!If((dt.subType!=null), ' - ' + dt.subType, '')}</td>
                <td>{!If((dt.IsPersonAccount), 'Customer', dt.RecordType_Name__c)}</td>
            </tr>
        </apex:repeat>
    </tbody>
</table>

but in the LWC, I am not able to do this conditional rendering
Here is the detail of my LWC html file:

LWC.html

<template>
    <lightning-card title="Contact" icon-name="action:new_task">
        <div class="slds-m-around_medium">
            <template if:true={contactList.data}>
                <table id="tblContactList">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Type</th>
                            <th>Profile ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={contactList.data} for:item="dt" for:index="indexvar">
                            <tr id="datarow">
                                <td>{!dt.Account.Name}</td>
                                <td>{!dt.Email}</td>
                                <td>{!dt.Phone}</td>
                                <!-- How to do conditional redering on these fields in LWC? -->
                                <td>{!dt.Type} {!If((dt.subType!=null), ' - ' + dt.subType, '')}</td>
                                <td>{!If((dt.IsPersonAccount), 'Customer', dt.RecordType_Name__c)}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template>
            <template if:true={contactList.error}>
                {contactList.error}
            </template>
        </div>
    </lightning-card>
</template>

the error I got when trying to do conditional rendering in LWC:

LWC1060: Template expression doesn't allow UnaryExpression

Basically I want to print the table data based on each record condition in the table. How can I achieve this in LWC?

---

EDIT

My question is not related to createComponent or createElement. This is about displaying the data using expression function (similar using {!if(condition, true, false))} in visualforce page). I cannot achieve this expression function in LWC

Answer 1

As of now, expressions are not supported in the LWC template. You can achieve this by defining custom properties in the controller only.

Let's assume you have got these data from the wired method, in the wired callback you can configure that properties based on conditions.

Ideally we should use a wrapper so that you won't have any unwanted fields on an object while performing DML operations. Like

sObjectWrapper{ sObject: contactObj, attribute1: 'val1', attribute2: 'val2', attributeN: 'valN' }

But here, for the sake of example, I have created two custom properties(customType, accountType) on contact js Object and put the values conditionally in those

@wire(getContactList)
wiredContacts({ error, data }) {
    if (data) {
        let newContacts = [];
        for (let index = 0; index < data.length; index++) {
            let contact = Object.assign({}, data[index]);

            if(contact.Type){
                if(contact.subType){
                    contact.customType = contact.Type + ' - ' + contact.subType;
                } else {
                    contact.customType = contact.Type;
                }
            }


            if(contact.IsSomething__c){
                contact.AccountType = 'Customer';
            } else {
                contact.AccountType = contact.RecordType_Name__c
            }
            newContacts.push(contact);
        }
        this.contacts = newContacts;
        this.error = undefined;
    } else if (error) {
        this.error = error;
        this.contacts = undefined;
    }
}

Now as you have defined custom properties based on conditions just use those in the htmll markup.

<tbody>
    <template for:each={contacts} for:item="dt" for:index="indexvar">
        <tr id="datarow">
            <td>{!dt.customType}</td>
            <td>{!dt.accountType}</td>
        </tr>
    </template>
</tbody>