Как добавить CSS стилей к определенной интерполяции в angular

Question

У меня есть простое сообщение, которое нужно отобразить, но содержимое внутри {{selectedName}} должно быть выделено жирным шрифтом. Есть ли способ добавить этот стиль только к этой конкретной интерполяции?

 `<p class="confirmation-text">{{ confirmationMessage | translate }} "{{ selectedName }}" ? </p>`

Answer 1

Вы можете создать трубу по этой ссылке { ссылка }

import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';

    @Pipe({
      name: 'bold'
    })
    export class BoldPipe implements PipeTransform {

      constructor(
        private sanitizer: Sanitizer
      ) {}

      transform(value: string, regex): any {
        return this.sanitize(this.replace(value, regex));
      }

      replace(str, regex) {
        return str.replace(new RegExp(`(${regex})`, 'gi'), '<b>$1</b>');
      }

      sanitize(str) {
        return this.sanitizer.sanitize(SecurityContext.HTML, str);
      }
    }

И использовать как <p class="confirmation-text">{{ confirmationMessage }} "{{ selectedName | bold }}" ? </p>

Answer 2

<p class="confirmation-text">
    {{ confirmationMessage | translate }} 
    <strong>
       {{ selectedName }} 
    </strong>
</p>

это поможет вам, просто upvote:)