apply bold text on part of string Angular

Question

I would like to make a part of my text bold.

I get a text from a specific file.

"INFORMATION": "Here's an example of text",

I would want that Here's an to be bold.

"INFORMATION": "<b>Here's an</b> example of text",

"INFORMATION": "<strong>Here's an</strong> example of text"

Then I print it

<span translate>INFORMATION</span>

Instead of getting

Here's an example of text

I get

<b>Here's an</b> example of text

or

<strong>Here's an</strong> example of text

UPDATE

I'm trying innerHTML

<span [innerHTML]="information | translate"></span>

Information is variable containing text

but it's ignoring my html tags, it's printing only text

Alcaide

Where is the code where you try and display the text? It looks like you are just passing in a string not a html. – Munch

"INFORMATION": "<b>Here an</b> example of text",Here's my code containing the text. Then I print it inside <span> – Alcaide

is translate your own class or did you use a framework/library? – Rennes

I use ngx-translate – Alcaide

Answer 1

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.

Annisannissa

This should be marked as the correct answer. – Churchlike

Answer 2

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>

Hammon

how to apply if it is in the tag like this: <p>{{ data.text }}</p> – Nano

add to innerHTML of Paragraph. it will work. – Bede

Answer 3

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

Crape

Answer 4

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>

Warranty

Answer 5

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

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

Laryngitis

It's only for Angular 1.x ? – Alcaide