I would like to know how to set only a specific letter inside a word, in my case the first one, in angularJS. For example, I have an array of words like :

var Words = [Mon,Tue,Wed];

I want to show the first letter of every element bold and the rest of word with normal font.

I would like to know how to set only a specific letter inside a word, in my case the first one, in angularJS. For example, I have an array of words like :

var Words = [Mon,Tue,Wed];

I want to show the first letter of every element bold and the rest of word with normal font.

• javascript
• css
• angularjs
• html

• I think your question has a fundamental flaw in that this is not problem for AngularJS to solve but rather a fairly simple CSS issue. – mccainz Commented Jun 3, 2015 at 12:12

3 Answers 3

Having you first letter bold is purely visual, so it should not be reflected in your HTML but purely managed by CSS. This is important for accessibility and usability of our text, also respect HTML semantics.

CSS is used to suggest its presentation to human users.

There is a property called ::first-letter (:first-letter) which work very well and is very well describe on MDN

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

Here is an exemple of CSS

p:first-letter {
    font-weight: bold;
}

And a JSFiddle to perform some test : http://jsfiddle/mtjzsh5v/

Hope this will work for you.

In the view, of course:

<div ng-repeat="value in Words">
    <b>{{value.substring(0,1)}}</b>{{value.substring(1)}}
</div>

Edit:

Using ::first-letter

<div ng-controller="MyCtrl">
  <div ng-repeat="Word in Words">
           <p>
             {{Word}}
           </p>
   </div>
</div>

Example: http://jsfiddle/kevalbhatt18/twvy0j4a/9/

If you want to bold entire word then you can use ng-if like this

Example: http://jsfiddle/kevalbhatt18/twvy0j4a/8/

Html:

<div ng-controller="MyCtrl">
  <div ng-repeat="Word in Words">
           <span ng-if="$index === 0" class="bold">{{Word}}- {{$index}}</span>
        <span ng-if="$index !== 0" class="preview">{{Word}}- {{$index}}</span>
   </div>
</div>

Controller:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.Words = ['Mon','Tue','Wed'];
}

CSS:

.bold{

    font-weight:bold;
}