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

问题

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?

回答1:

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

回答2:

You have to split up the text to make specific part of the string bold in Angular 2 while you use translate.

Something like this: http://jsfiddle.net/Eh2ym/

<span>before slash / after slash</span><br>
<span>before slash / after slash</span><br>
<script>
$('span').html(function(i, old){
   var htm= old.split('/'); 
    return '<strong>'+ htm[0] +'</strong>'+htm[1];    
})
<script>

But the above example is in javascript.

来源：https://stackoverflow.com/questions/46010536/how-to-make-specific-part-of-a-string-bold-in-angular-2