Capitalize the first letter of string in AngularJs

Question

I want capitalize first character of string in angularjs  As i used    uppercase expression   uppercase   it convert whole string to upper case

User · Answer

If you don t want to build custom filter then  you can use directly     foo awesome property substring 0 1    uppercase    foo awesome property substring 1

User · Answer

Angular has  titlecase  which capitalizes the first letter in a string  For ex   envName   titlecase   will be displayed as  EnvName  When used with interpolation  avoid all spaces like    envName titlecase     and the first letter of value of envName will be printed in upper case

User · Answer

This is another way     some str   limitTo 1   uppercase    some str substr 1    lowercase

User · Answer

in Angular 4 or CLI you can create a PIPE like this   import   Pipe  PipeTransform   from   angular core    Pipe     name   capitalize            Place the first letter of each word in capital letters and the other in lower case  Ex  The LORO speaks   The Loro Speaks     export class CapitalizePipe implements PipeTransform     transform value  any   any       value   value replace                 if  value          let w             if  value split      length  gt  0            value split      forEach word   gt              w    word charAt 0  toUpperCase     word toString   substr 1  word length  toLowerCase                             else           w   value charAt 0  toUpperCase     value toString   substr 1  value length  toLowerCase                  return w            return value

User · Answer

You can try to split your String into two parts and manage their case separately      Name charAt 0    uppercase     quot  quot     Name slice 1  element length    lowercase      or    Name charAt 0    uppercase       Name slice 1  element length    lowercase

User · Answer

Instead if you want to capitalize each word of a sentence then you can use this code  app filter  capitalize   function       return function input  scope    if  input  null  input   input toLowerCase   split        for  var i   0  i  lt  input length  i            You do not need to check if i is larger than input length  as your for does that for you       Assign it back to the array    input i    input i  charAt 0  toUpperCase     input i  substring 1                  Directly return the joined string    return input join                  and just add filter  capitalize  to your string input  for ex -   name   capitalize

User · Answer

Just to add my own take on this issue  I would use a custom directive myself   app directive  capitalization   function      return       require   ngModel       link  function  scope  element  attrs  modelCtrl             modelCtrl  parsers push function  inputValue                 var transformedInput      inputValue    inputValue charAt 0  toUpperCase     inputValue substr 1  toLowerCase                      if  transformedInput    inputValue                    modelCtrl  setViewValue transformedInput                   modelCtrl  render                               return transformedInput                         Once declared you can place inside your Html as below    lt input ng-model  surname  ng-trim  false  capitalization gt

User · Answer

a nicer way   app filter  capitalize   function       return function token          return token charAt 0  toUpperCase     token slice 1

User · Answer

If you use Bootstrap  you can simply add the text-capitalize helper class    lt p class  text-capitalize  gt CapiTaliZed text  lt  p gt    EDIT  just in case the link dies again      Text Transform      Transform text in components with text capitalization classes       lowercased text    UPPERCASED TEXT    CapiTaliZed Text          lt p class  text-lowercase  gt Lowercased text  lt  p gt   lt p class  text-uppercase  gt Uppercased text  lt  p gt   lt p class  text-capitalize  gt CapiTaliZed text  lt  p gt        Note how text-capitalize only changes the first letter of each word  leaving the case of any other letters unaffected

User · Answer

use this capitalize filter   x000D   x000D  var app   angular module  app        x000D   x000D  app controller  Ctrl   function   scope    x000D      scope msg    hello  world    x000D      x000D   x000D  app filter  capitalize   function     x000D      return function input    x000D        return  angular isString input   amp  amp  input length  gt  0    input charAt 0  toUpperCase     input substr 1  toLowerCase     input  x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  gt  x000D       lt div ng-controller  Ctrl  gt  x000D           lt p gt  lt b gt My Text  lt  b gt    msg   capitalize   lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I d say don t use angular js as you can simply use css instead   In your css  add the class    capitalize      text-transform  capitalize      Then  simply wrap the expression  for ex  in your html    lt span class  capitalize  gt    uppercase expression    lt  span gt    No js needed

User · Answer

For the AngularJS from meanjs org  I place the custom filters in modules core client app init js  I needed a custom filter to capitalize each word in a sentence  here is how I do so   angular module ApplicationConfiguration applicationModuleName  filter  capitalize   function     return function str        return str split      map function input  return    input    input charAt 0  toUpperCase     input substr 1  toLowerCase                  join                The credit of the map function goes to  Naveen raj

User · Answer

x000D   x000D   capitalize   x000D    display  inline-block  x000D    x000D   x000D   capitalize first-letter   x000D    font-size  2em  x000D    text-transform  capitalize  x000D    x000D   lt span class  capitalize  gt  x000D    really  once upon a time there was a badly formatted output coming from my backend   lt strong gt all completely in lowercase lt  strong gt  and thus not quite as fancy-looking as could be - but then cascading style sheets  which we all know are  lt a href  http   9gag com gag 6709 css-is-awesome  gt awesome lt  a gt   with modern pseudo selectors came around to the rescue    x000D   lt  span gt  x000D   x000D   x000D

User · Answer

For Angular 2 and up  you can use    abc   titlecase      Check Angular io API for complete list

User · Answer

If you are using Angular 4  then you can just use titlecase    toUppercase   titlecase     don t have to write any pipes

User · Answer

var app   angular module  app        app filter  capitalize   function         return function str            if  str     undefined  return     avoid undefined         str   str toLowerCase   split               var c               for  var i   0  i  lt    str length - 1   i                  var word                    for  var j   0  j  lt  str i  length  j                      c   str i  j                   if  j     0                        c   c toUpperCase                                      word    c                            str i    word                    str   str join              return str

User · Answer

In angular 7  which has built-in pipe       yourText   titlecase

User · Answer

if  value     value    value length  gt  1    value 0  toUpperCase     value substr 1  toLowerCase     value toUpperCase

User · Answer

if you want capitalize each word from string  in progress -  In Progress   you can use array like this    filter  capitalize   function         return function input            return    input    input split      map function wrd  return wrd charAt 0  toUpperCase     wrd substr 1  toLowerCase      join

User · Answer

You can add capitalize functionality run time as    lt td gt   lastName charAt 0  toUpperCase    lastName substr 1  toLowerCase     lt  td gt

User · Answer

uppercase expression   capitaliseFirst   should work

User · Answer

If you are after performance  try to avoid using AngularJS filters as they are applied twice per each expression to check for their stability   A better way would be to use CSS   first-letter pseudo-element with text-transform  uppercase   That can t be used on inline elements such as span  though  so the next best thing would be to use text-transform  capitalize  on the whole block  which capitalizes every word   Example    x000D   x000D  var app   angular module  app        x000D   x000D  app controller  Ctrl   function   scope    x000D      scope msg    hello  world    x000D      x000D   capitalize   x000D    display  inline-block    x000D    x000D   x000D   capitalize  first-letter   x000D    text-transform  uppercase  x000D    x000D   x000D   capitalize2   x000D    text-transform  capitalize  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  gt  x000D       lt div ng-controller  Ctrl  gt  x000D           lt b gt My text  lt  b gt   lt div class  capitalize  gt   msg   lt  div gt  x000D           lt p gt  lt b gt My text  lt  b gt   lt span class  capitalize2  gt   msg   lt  span gt  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I like the answer from  TrampGuy  CSS is always  well  not always  a better choice  so  text-transform  capitalize  is certainly the way to go   But what if your content is all uppercase to begin with   If you try text-transform  capitalize  on content like  FOO BAR  you ll still get  FOO BAR  in your display   To get around that issue you could put the text-transform  capitalize  in your css  but also lowercase your string  so    lt ul gt     lt li class  capitalize  gt    foo awesome property   lowercase    lt  li gt   lt  ul gt    where we are using  TrampGuy s capitalize class    capitalize     text-transform  capitalize      So  pretending that foo awsome property would normally print  FOO BAR   it will now print the desired  Foo Bar

[javascript] Capitalize the first letter of string in AngularJs

Examples related to javascript

Examples related to angularjs

Examples related to filter

Examples related to uppercase

Examples related to capitalize