How to truncate text in Angular2

Question

Is there a way that I could limit the length of the string to a number characters  for e g  I have to limit a title length to 20    data title      Is there any pipe or filter to limit the length

User · Answer

Truncate Pipe with optional params     limit - string max length completeWords - Flag to truncate at the nearest complete word  instead of character ellipsis - appended trailing suffix   -  import   Pipe  PipeTransform   from   angular core     Pipe     name   truncate     export class TruncatePipe implements PipeTransform     transform value  string  limit   25  completeWords   false  ellipsis                if  completeWords          limit   value substr 0  limit  lastIndexOf                 return value length  gt  limit   value substr 0  limit    ellipsis   value          Don t forget to add a module entry    NgModule     declarations        TruncatePipe        export class AppModule      Usage  Example String   public longStr    A really long string that needs to be truncated     Markup      lt h1 gt   longStr   truncate    lt  h1 gt      lt  -- Outputs  A really long string that    -- gt      lt h1 gt   longStr   truncate   12    lt  h1 gt      lt  -- Outputs  A really lon    -- gt      lt h1 gt   longStr   truncate   12   true    lt  h1 gt      lt  -- Outputs  A really    -- gt      lt h1 gt   longStr   truncate   12   false            lt  h1 gt      lt  -- Outputs  A really lon    -- gt

User · Answer

Two way to truncate text into angular     let str    How to truncate text in angular     1  Solution      str   slice 0 6     Output      how to   If you want to append any text after slice string like         str length gt 6    str   slice 0 6        str       Output    how to      2  Solution Create custom pipe      if you want to create custom truncate pipe   import   Pipe  PipeTransform   from   angular core     Pipe    name   truncate      export class TruncatePipe implements PipeTransform    transform value  string  args  any     string       const limit   args length  gt  0   parseInt args 0   10    20      const trail   args length  gt  1   args 1               return value length  gt  limit   value substring 0  limit    trail   value           In Markup     str   truncate  20        or     str   truncate  20               or   Don t forget to add a module entry    NgModule     declarations        TruncatePipe        export class AppModule

User · Answer

Here s an alternative approach using an interface to describe the shape of an options object to be passed via the pipe in the markup    Pipe     name   textContentTruncate     export class TextContentTruncatePipe implements PipeTransform      transform textContent  string  options  TextTruncateOptions   string       if  textContent length  gt   options sliceEnd          let truncatedText   textContent slice options sliceStart  options sliceEnd         if  options prepend    truncatedText      options prepend   truncatedText            if  options append    truncatedText      truncatedText   options append            return truncatedText            return textContent          interface TextTruncateOptions     sliceStart  number    sliceEnd  number    prepend   string    append   string      Then in your markup     someText   textContentTruncate  sliceStart  0  sliceEnd  50  append

User · Answer

Limit length based on words Try this one  if you want to truncate based on Words instead of characters while also allowing an option to see the complete text  Came here searching for a Read More solution based on words  sharing the custom Pipe i ended up writing  Pipe  import   Pipe  PipeTransform   from   angular core     Pipe     name   readMore     export class ReadMorePipe implements PipeTransform      transform text  any  length  number   20  showAll  boolean   false  suffix  string           any            if  showAll          return text             if   text split  quot   quot   length  gt  length                  return text split  quot   quot   splice 0  length  join  quot   quot     suffix             return text          In Template   lt p  innerHTML   quot description   readMore 30 showAll quot  gt  lt  p gt   lt button  click   quot triggerReadMore   quot   ngIf  quot  showAll quot  gt Read More lt button gt   Component  export class ExamplePage implements OnInit        public showAll  any   false           triggerReadMore             this showAll   true                In Module  import   ReadMorePipe   from      helpers read-more pipe     NgModule     declarations   ReadMorePipe     export class ExamplePageModule

User · Answer

Like this     data title   slice 0 20     And if you want the ellipsis  here s a workaround    data title   slice 0 20

User · Answer

Just tried  Timothy Perez  answer and added a line   if  value length  lt  limit     return    value substr 0  limit       to   import   Pipe  PipeTransform   from   angular core     Pipe     name   truncate     export class TruncatePipe implements PipeTransform   transform value  string  limit   25  completeWords   false  ellipsis                if  value length  lt  limit     return    value substr 0  limit         if  completeWords         limit   value substr 0  limit  lastIndexOf               return    value substr 0  limit    ellipsis

User · Answer

Very simple using slice pipe  angular s core pipe   as you asked for data title      data title   slice 0 20      From Angular common docs https   angular io api common SlicePipe

User · Answer

If you want to truncate by a number of words and add an ellipsis you can use this function   truncate value  string  limit  number   40  trail  String           string     let result   value           if  value        const words   value split   s         if  words length  gt  Math abs limit           if  limit  lt  0            limit    -1          result   trail   words slice words length - limit  words length  join               else           result   words slice 0  limit  join        trail                       return result      Example   truncate  Bacon ipsum dolor amet sirloin tri-tip swine   5          gt   Bacon ipsum dolor amet sirloin       taken from  https   github com yellowspot ng2-truncate blob master src truncate-words pipe ts  If you want to truncate by a number of letters but don t cut words out use this   truncate value  string  limit   25  completeWords   true  ellipsis              let lastindex   limit    if  completeWords        lastindex   value substr 0  limit  lastIndexOf             return    value substr 0  limit    ellipsis        Example   truncate  Bacon ipsum dolor amet sirloin tri-tip swine   19  true          gt   Bacon ipsum dolor      truncate  Bacon ipsum dolor amet sirloin tri-tip swine   19  false          gt   Bacon ipsum dolor a

User · Answer

You can truncate text based on CSS  It helps to truncate a text-based on width not fix character   Example  CSS   truncate               white-space  nowrap              overflow  hidden              text-overflow  ellipsis              content               width 100               white-space  nowrap              overflow  hidden              text-overflow  ellipsis              HTML   lt div class  content  gt       lt span class  truncate  gt Lorem Ipsum is simply dummied text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  span gt   lt  div gt    Note  this code use full for one line not for more than one    Ketan s Solution is best if you want to do it by Angular

User · Answer

I ve been using this module ng2 truncate  its pretty easy  import module and u are ready to go    in    data title   truncate   20

[angular] How to truncate text in Angular2?

Examples related to angular

Examples related to angular2-template