javascript - Cómo poner en negrita una parte específica de una cadena en Angular 2

Tengo un código HTML como el siguiente:

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

Estoy usando ngTranslate para traducir la descripción. La descripción es una clave de mi archivo de traducción, y se mostrará el valor de la clave.

La descripción se verá como a continuación: "haga clic en cancelar para cancelar o haga clic en confirmar para continuar".

Quiero poner en negrita el primer cancelar y confirmar en la descripción. ¿Cómo puedo hacer eso usando CSS y Angular 2?

Respuesta #1

Deberías hacer uso de [innerHTML], tener etiquetas HTML dentro de tus traducciones así:

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

Y en la plantilla enlázalo como cadena HTML:

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

Por favor, consulte la Documentación Oficial

Actualización: Ejemplo de Plunker funcional