Change text in bold in angularjs application

Question

I have an angular.js application in which I display some elements in a table. In those elements, I have a name and in some case, I change it to add <b> and </b> to have it in bold. But it's displayed like a string and not like HTML code.

So I would replace all the text on the page between the <b> and the </b> with the same text but in bold.

I try to do this:

var pattern = new RegExp(nameFilter, "g");
e.name = e.name.replace(pattern, '<span class="highlighted">' + nameFilter + '</span>');

But it's always displayed like a string.

Do you know what do to have the text in bold?

For that you need to use trustAsHtml using $sce provider. Can you post your template as well to understand your question better? — Immanuel Kirubaharan
– Immanuel Kirubaharan, Commented Aug 22, 2018 at 8:58
The template is pretty difficult but I just have a table with a ng-repeat to display the name of all components in a column. And in some components, I changed the name to add the bold signs. Can you share an example of trustAsHtml ? — Adrien
– Adrien, Commented Aug 22, 2018 at 9:01

Immanuel Kirubaharan · Accepted Answer · 2018-08-22 10:37:12Z

1

Here I'm adding the code for $sce.trustAsHtml example scenario below as you have requested in the comment section. Also please check this plunker for working example.

Template:

<tr ng-repeat="emp in empList">
    <td><span ng-bind-html="emp.name | trustAsHtml"></span></td>
    <td>{{emp.dept}}</td>
</tr>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.empList = [
    { name: '<b>Test 1</b>', dept: 'Finance'},
    { name: '<b>Test 2</b>', dept: 'Development'},
    { name: '<b>Test 3</b>', dept: 'Testing'},
    { name: '<b>Test 4</b>', dept: 'DBA'}
  ];
});

app.filter('trustAsHtml', ['$sce', function($sce){
  return $sce.trustAsHtml;
}]);

Note: Do not forget to inject 'ngSanitize' into module as shown in the plunker example.

answered Aug 22, 2018 at 10:37

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change text in bold in angularjs application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related