How to make specific part of a string bold in Angular 2

Question

I have an HTML code as below:

<div class="row">
      <div class="col-12" style="margin-top:15px;margin-bottom:10px">
            {{"description" | translate}}
      </div>
</div>

I am using ngTranslate to translate the description. The description is a key from my translation file, and the value of the key will be displayed.

The description will look like as below: "click cancel to cancel or click confirm to proceed".

I want to make the first cancel and confirm in the description to bold. How can I do that using css and angular 2?

Solution

You should make use of [innerHTML], have html tags within your translations like this:

{
    "description": "click <strong>cancel</strong> to cancel or click <strong>confirm</strong> to proceed"
}

And in template bind it as html string:

<div [innerHTML]="'description' | translate"></div>

Please check the Official Documentation

Update: Working Plunker Example