Render Error HTML without duplicating it in Aura and LWC

Question

I have one Aura and LWC component. I have one custom metadata boolean flag which when turned on will render the error message in Aura and LWC both Like this.

Aura:

<aura:if isTrue="{!v.isTrue}">
        <div class="slds-modal__header">
            <h1 class="slds-text-heading_medium">Error: Account already exists for this lead. Please convert lead to existing Account</h1>
        </div>
        <aura:set attribute="else"> 
    Normal HTML
        </aura:set>
    </aura:if>

LWC:

<template>
    <template if:true={isOn}>
     Normal HTML
    </template>
    <template if:true={isOn}>
        <div if:false={isOpenOptyPresent}>
            <br />
            <div class="slds-text-heading_large select-opty-text">This Flag is off. You cannnot create record..
            </div>
        </div>
    </template>
</template>

Now I have another custom metadata boolean which should also render the same error message HTML in both Aura and LWC when turned on. The user case is like this.

If custom metadata boolean flag A is turned on, US country users will see that error message HTML when it is turned off they will see normal HTML

If custom metadata boolean flag B is turned on Non-US users should see that error message HTML when it is turned off they will see normal HTML

Now the Problem is I do not want to duplicate the error message HTML portion like this.

<template>
    <template if:true={isOn}>
     Normal HTML
    </template>
    <template if:true={isOnFLagA}>
        
            <br />
            <div class="slds-text-heading_large select-opty-text">This Flag is off. You cannnot create record..
            </div>
     
    </template>
  <template if:true={isOnFlagB}>
        
            <br />
            <div class="slds-text-heading_large select-opty-text">This Flag is off. You cannnot create record..
            </div>
     
    </template>
</template>

Can we control this without duplicating the error HTML portion ?

Answer 1

You can use a property with getter and determine for the entire error message whether to show or not, instead of adding the flag checks in template. It would look something like this.

get showError() {
  return isFlagA || isFlagB;
}

<template>
  <template if:true={isOn}>
    <div if:false={showError}>Normal HTML</div>
    <div if:true={showError} class="slds-text-heading_large select-opty-text">This Flag is off. You cannnot create record..</div>
  </template>
</template>

Hope this helps.