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": "Here's an example of text",

"INFORMATION": "Here's an 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

Where is the code where you try and display the text? It looks like you are just passing in a string not a html. — GifCo, Mar 19 '19 at 13:03
`"INFORMATION": "Here an example of text",`Here's my code containing the text. Then I print it inside `` — Hamza Haddad, Mar 19 '19 at 13:08
is `translate` your own class or did you use a framework/library? — Carsten, Mar 19 '19 at 13:24

score 8 · Answer 1 · 2019-03-19T13:17:28.300

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.

This should be marked as the correct answer. – derBndr Jan 13 '22 at 13:46 — derBndr, Jan 13 '22 at 13:46

score 1 · Answer 2 · edited Jul 27 '21 at 09:13

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: 

how to apply if it is in the tag like this:
{{ data.text }}
– Agung Sudrajat Aug 08 '22 at 11:49 — Agung Sudrajat, Aug 08 '22 at 11:49
add to innerHTML of Paragraph. it will work. – Santhosh Aug 03 '23 at 11:10 — Santhosh, Aug 03 '23 at 11:10

score 1 · Answer 3 · answered Mar 20 '23 at 22:13

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

this worked for me. Thanks @user21442816 – Santhosh Aug 03 '23 at 11:09 — Santhosh, Aug 03 '23 at 11:09

score 0 · Answer 4 · answered Mar 19 '19 at 13:08

0

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

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

answered Mar 19 '19 at 13:08

Antoine Delia

1,728
5
26
42

It's only for Angular 1.x ? – Hamza Haddad Mar 19 '19 at 15:48

apply bold text on part of string Angular

4 Answers4

Linked