Issue embedding link in custom label in LWC

Question

In LWC, I have below html template which is showing an error message. error message is stored in custom label.

<div class="text_container slds-m-left_medium slds-m-right_medium slds-text-color_error">
    {errorText}
</div>

errorText custom label has value: 'Error showing users. Click here to navigate to user list page.'. In this I want to make 'here' word in label as navigation. So if I click on it, it will navigate to user list page. To replace here with achor tag I followed below approach:

handleMessage(message) {
    this.errorText = message?.errorMessage;

    if (this.errorText.includes('here')) {
        this.errorText = this.errorText.replace('here', `<a href={handleNavAddress} target="_blank">here</a>`);
    }
}

handleNavAddress() {
    this[NavigationMixin.Navigate](
        {
            type: 'comm__namedPage',
            attributes: {
                name: 'User_List'
            },
        }
    );
}

I am using navigationMixin to navigate to community page. But this is not working. It shows full replaced anchor tag in label instead of making 'here' as navigational. Any suggestions on how can I approach this.

Answer 1

To display the HTML link you need to use lightning-formatted-rich-text component as below.

<lightning-formatted-rich-text class="myClass" value={errorText}></lightning-formatted-rich-text>

Also you need to update the href link with the community page inside the JS for navigation.

this.errorText = this.errorText.replace('here', `<a href="https://google.com" target="_blank">here</a>`);