52

How can I capitalize the first letter of a string using Angular or typescript?

user2004
  • 1,783
  • 4
  • 15
  • 42
  • Check this [reference links][blog]. There will be solution. [blog]: https://stackoverflow.com/questions/30207272/capitalize-the-first-letter-of-string-in-angularjs – Michał Dębosz Mar 15 '18 at 10:07
  • 7
    This is not a duplicate. Pipes are the correct angular way to do this – Liam Apr 30 '19 at 11:19
  • 1
    This is not a duplicate. This is an Angular question, not a javascript one. A custom pipe should be used, which does not exist in regular javascript. – Kurt Van den Branden Mar 13 '23 at 06:21

3 Answers3

93
function titleCaseWord(word: string) {
  if (!word) return word;
  return word[0].toUpperCase() + word.substr(1).toLowerCase();
}

You can also use in template TitleCasePipe

Some component template:

{{value |titlecase}}
Liam
  • 27,717
  • 28
  • 128
  • 190
Yerkon
  • 4,548
  • 1
  • 18
  • 30
  • 30
    Note that the `TitleCasePipe` will capitalise the first letter of **every word** in the string, not just the first letter of the entire string—so the `TitleCasePipe` is not strictly an option for what has been asked. – Alex Peters Nov 06 '18 at 02:13
  • 6
    This should not be the accepted answer. Like Alex mentioned, TitleCasePipe will capitalize very word. Answers below should be accepted. Alternative is a custom pipe. – Paul A. Trzyna Jan 28 '19 at 17:12
  • 5
    ⚠️ Be carful with this solution, because in some languages (like Spanish) when you have a question string, start with character `¿Esto es una pregunta?`. So, when apply this algorithm in spanish questions, don't work properly. I add this: ```if (value[0] === '¡' || value[0] === '¿') { return ( value[0] + value[1].toUpperCase() + value.substr(2).toLowerCase() ); }``` – Matias de Andrea Oct 19 '20 at 11:21
  • @MatiasdeAndrea I wonder if `toLocaleUpperCase()` would help here – Michael Murphy Aug 05 '22 at 05:59
  • 1
    Is a nice question @MichaelMurphy. I don't test this – Matias de Andrea Aug 05 '22 at 09:43
  • @MatiasdeAndrea I think the answer is no, using `toLocaleUpperCase()` won't help (I did some quick testing). I think the best option is something like what you have stated, but with a function `isPunctuation(char)` that takes in a single character string and returns `true` if the character is accepted punctuation, otherwise `false`. – Michael Murphy Aug 08 '22 at 14:36
  • This answer is incorrect because validly capitalized letters not at the beginning of the word will be made lowercase. For example, the hyphenated last name "Jones-Smith" will transform as "Jones-smith" .... see examples at docs e.g. https://angular.io/api/common/TitleCasePipe – CSSBurner Aug 10 '22 at 14:00
  • You need to make custom pipe, example: `import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'firstLetterCapital' }) export class FirstLetterCapitalPipe implements PipeTransform { transform(sentence: string, ...args: unknown[]): string { return sentence[0].toUpperCase() + sentence.substring(1).toLowerCase(); } }` – Ivanp Mar 01 '23 at 13:08
  • ⚠️ this is not a good solution because titlecase pipe will capitilise every world in the sentence – Ghassen Mar 20 '23 at 13:18
19
 let str:string = 'hello';
 str = str[0].toUpperCase() + str.slice(1);
Steve Ruben
  • 1,336
  • 11
  • 20
3
var str = 'santosh';
str = str ? str.charAt(0).toUpperCase() + str.substr(1).toLowerCase() : '';
Santosh Singh
  • 561
  • 2
  • 16
  • Thank you for this code snippet, which might provide some limited short-term help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its long-term value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made, such as languages with which it doesn't work correctly. – Toby Speight Mar 15 '18 at 14:29
  • Yes Sure, Thanks for your advice – Santosh Singh Mar 15 '18 at 14:31