apply bold text on part of string Angular

What I would do is a pipe that sanitizes the string you're giving to it, and use a regex to make it more generic. Something like this stackblitz :

https://stackblitz.com/edit/angular-tyz8b1?file=src%2Fapp%2Fapp.component.html

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

@Pipe({
  name: 'boldSpan'
})
export class BoldSpanPipe 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);
  }
}

This way, the variable content doesn't actually change, meaning your data remains untouched.

changing @user4676340's answer, to match string that is written like this: "blabla *bold* blabla" to return "blabla bold blabla" - Whatsapp style

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

@Pipe({
  name: 'boldText'
})
export class BoldTextPipe implements PipeTransform {

  constructor(private sanitizer: Sanitizer) { }

  transform(value: string): any {
    const regex = /[\*][\w\W]*[\*]/gmi;
    return this.sanitize(this.replace(value, regex));
  }

  replace(str, regex) {
    let matched = str.match(regex);
    matched ? matched.forEach(foundString => {
      foundString = foundString.substring(1, foundString.length - 1);
      str = str.replace(regex, `<b>${foundString}</b>`);
    }) : noop;
    return str;
  }

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

(using innerHTML in the component template)

TS: text="blabla \*bold\* blabla"

HTML: <p [innerHTML]="text | boldText"></p>

I don't know the whole context of the task, but here is a simple solution. I hope that's enough. (But we are dealing with "apply bold text on part of string Angular".) The changing from @user4676340 and the following edits are good

// app.components.ts

item = {"INFORMATION": "Here's an", "TEXT": " example of text"};
item3 = "Here's an";
item3_1 = " example of text";

// app.components.html

Variant 1 :

<p>
<b><span>{{item.INFORMATION}}</span></b>
<span>{{item.TEXT}}</span>
</p>

Variant 2:

<p>
<b><span [innerHTML]="item3"></span></b>
<span [innerHTML]="item3_1"></span>
</p>

Result: Here's an example of text

I updated @Blazzze IL's answer to support multiple occurrences of asterisks: For a string, where multiple words should be written in bold each with a star (*) at start and end.

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { noop } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'boldText'
})
export class BoldTextPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: string): any {
    const regex = /\*([^,*]+)\*/gmi;
    return this.sanitize(this.replace(value, regex));
  }

  replace(str: string, regex: RegExp) {
    let matched = str.match(regex);
    matched ? matched.forEach((foundString: string) => {
      var newString = foundString.substring(1, foundString.length - 1);
      str = str.replace(foundString, `<b>${newString}</b>`);
    }) : noop;
    return str;
  }

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

HTML: <p [innerHTML]="text | boldText"></p>

You can do this with angular-translate 2.0 if you have it.

<span translate="{{ 'INFORMATION' }}"></span>