How to Make Specific Part of a String Bold in Angular 2

How to make specific part of a string bold in Angular 2

You should make use of [innerHTML], have html tags within your translations like this:

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

And in template bind it as html string:

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

Please check the Official Documentation

Update: Working Plunker Example

How to bold partial text in a JavaScript string

I think you probably need to use innerHTML:

<div [innerHtml]="message"></div>

You can check the documentation for more information

How to make text bold in string literal in angular?

Use innerHTML. Refer to Documentation.

if (res.status== "200") {
    this.colortext = `<b>${res.colorofthebus}</b> color is the best of ${res.othercolor}`;
  }

...

<div [innerHTML]="colortext"></div>

Angular - Make section of string variable bold

You can use innerHTML, something like:

<p [innerHTML]="message"></p>

Setting the value of innerHTML removes all the element's contents and replaces them with nodes constructed by parsing the
HTML set in the message variable.
When the text is set using statement <p>{{message}}</p> the content is not parsed as HTML but as plain string.

How to set a particular character in string to bold using Angular?

You can create a pipe as below:

@Pipe({
  name: 'bold'
})
export class BoldPipe implements PipeTransform {
 transform(textValue: string, subTextValue: string): string {     
     return textValue.replace(new RegExp(`(${subTextValue})`, 'gi'), '<b>$1</b>');
 }
}

and in HTML:

<span [innerHTML]="textValue | bold:subTextValue"></span>

This should give you:

Hello World!

How do I bold a String that I'm passing in through a message service?

You just need to changed your data model.

You can define Message, which represents single sentence with array of words, which need to be highlighted.

export interface Message {
    text: string;
    wordsToHighlight: string[];
}

Then during iteration over the messages array, create html string and use HTML element's innerHTML or outerHTML property to render it.
Pay attention on getHighlightedText method below.

Your component may look like this:

@Component({
    selector: 'app-demo',
    template: `
        <div *ngFor="let message of messages" [outerHTML]="getHighlightedText(message)"></div>
    `
})
export class DemoComponent implements OnInit {

    messages: Message[];

    constructor(private readonly messageService: MessageService) {}

    ngOnInit(): void {
        this.messages = this.messageService.messages;
        this.messageService.add({ text: 'Completed all current actions', wordsToHighlight: ['all', 'actions'] })
    }

    getHighlightedText(message: Message): string {
        const words = message.text.split(' ');

        return words.map((word) => {
            const highlight = message.wordsToHighlight.some((wordToHighlight) => word.toLowerCase() === wordToHighlight.toLowerCase());

            if (highlight) {
                return `<b>${word}</b>`;
            } else {
                return word;
            }
        }).join(' ');
    }
}

Message service:

@Injectable({
    providedIn: 'root',
})
export class MessageService {
    messages: Message[] = [];

    add(message: Message) {
        this.messages.push(message);
    }

    clear() {
        this.messages = [];
    }
}

unable to bold a particular word inside td tag of a table in angular

To set html content programatically, we need to use innerHTML.

To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}

To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""

Change your html code like below,

<table class="action_tables" border="1">
  <tr>
    <td class="header_column">Name:</td>
    <td class="content_column">this is <b>bold</b></td>
  </tr>
  <tr>
    <td class="header_column">Name:</td>
    <td class="content_column">{{ element[0].matched_keyword }}</td>
  </tr>
  <tr>
    <td class="header_column">Subject:</td>
    <td class="content_column">
      <div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
    </td>
  </tr>
  <tr>
    <td class="header_column">bold value:</td>
    <td class="content_column"><div innerHTML="{{ x }}"></div></td>
  </tr>
</table>

Change specific words of string to bold

according to this https://docs.angularjs.org/api/ng/directive/ngBindHtml

You need to include the ngBindHtml and $sanitize service

In your js file, it should be

angular.module('App', ['ngSanitize'])
  .controller('Ctr', ['$scope', function($scope) {
     $scope.abc = "Downstream";
     $scope.abc2 = $scope.abc.concat('<b>','Upstream','</b>');
}]);

In your html file, it should be

<div ng-controller="Ctr">
    <p ng-bind-html="abc2"></p>
</div>

---

Related Topics