Angular render HTML inside property values

Question

message.properties.ts

export const message {
'comment.require.error2': 'The response has been chosen as <b>NO</b>, you must provide comments to support it',
}

HTML

 <small class="lmn-text-danger">
     {{ message['comment.require.error2'] }}
 </small>

How can I render NO as bold, when I try to use this way it also renders HTML(<b>NO</b>)

Answer 1

Use innerHTML to render string as HTML instead of plain text with string interpolation:

 <small class="lmn-text-danger" [innerHTML]="message['comment.require.error2']"></small>

Also, as this adds elements to the DOM, which poses security risk, it is advisable to sanitize it with DOMSanitizer

Example using pipe: Angular 5 - sanitizing HTML with pipe