How to truncate text in Angular2?

by

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>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 > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > 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 {}

More Related Contents:

  1. Angular HTML binding
  2. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  3. Angular2: Cannot read property ‘name’ of undefined
  4. NgFor doesn’t update data with Pipe in Angular2
  5. How can I write data attributes using Angular?
  6. Angular2 multiple router-outlet in the same template
  7. OrderBy pipe issue
  8. Angular 2 Scroll to top on Route Change
  9. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  10. How to instantiate and apply directives programmatically?
  11. Angular 2 Read More Directive
  12. Angular2: How is ngfor expanded
  13. How to add “class” to host element?
  14. vs
  15. Angular2 – Interpolate string with html
  16. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  17. Angular 2 input parameters on root directive [duplicate]
  18. What is let-* in Angular 2 templates?
  19. Angular 2: How to write a for loop, not a foreach loop
  20. How to detect scroll to bottom of html element
  21. How to check the length of an Observable array
  22. How can I use ngFor to iterate over Typescript Enum as an array of strings
  23. Angular 2 disable sanitize
  24. Why angular 2 ngOnChanges not responding to input array push
  25. CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error
  26. how to use track by inside ngFor angular 2
  27. How to use Dependency Injection (DI) correctly in Angular2?
  28. When to use ‘npm start’ and when to use ‘ng serve’?
  29. Angular 5 Reactive Forms – Radio Button Group
  30. Subscribing to a nested Observable

Leave a Comment