<strong></strong> or <b> are getting displayed as string

Question

I have a custom label in salesforce where I have given 'This will delete the file FILENAME' In js I'm replacing FILENAME with actual file name

var updatedlabel = this.label.DeleteFileConfirmation.replace("FILENAME", fileName);

I tried using <strong> and <b> with filename. But or are getting displayed as a string along with filename instead of making it bold. Even <b>${fileName}</b> didn't work Anybody has any idea? js:

   handleRowAction(event) {
        let actionName = event.detail.action.name; 
        let record_name = event.detail.row.name;

        switch (actionName) {
            case 'Preview':  
               //do something            
                break;

            case 'Download':     
                //do something   
                break;
            
            case 'Remove':
                this.removeFile(record_name);
                break;
            default:
        }
    }

    removeFile(fileName) {
            var updatedlabel = this.label.DeleteConfirmation.replace("FILENAME","<strong>"+ fileName+"</strong>");
            this.message = updatedlabel.split("<br/><br/>")[0];
            this.newLineMessage = updatedlabel.split("<br/><br/>")[1];
            this.showConfirmDialog = true;
    }

I cant make this bold in html as its taken from custom label custom label

   <labels>
        <fullName>DeleteConfirmation</fullName>
        <categories>Message</categories>
        <language>en_US</language>
        <protected>true</protected>
        <shortDescription>DeleteConfirmation</shortDescription>
        <value>This will delete the file FILENAME.</value>
    </labels>

Thanks in advance

Answer 1

Use lightning-formatted-rich-text to display the newLineMessage.

<lightning-formatted-rich-text value={newLineMessage}>
</lightning-formatted-rich-text>

It supports strong and many other HTML tags. you can check them all here Supported HTML Tags and attributes