shorten.pipe.ts
import {Pipe, PipeTransform} from '@angular/core'; @Pipe({ name: 'shorten' }) export class ShortenPipe implements PipeTransform { transform(value: any, limit: number): any { if (value.length > limit) { return value.substr(0, limit) + ' ...'; } return value; } }
app.component.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <ul class="list-group"> <li class="list-group-item" *ngFor="let server of servers" [ngClass]="getStatusClasses(server)"> <span class="badge"> {{ server.status }} </span> <strong>{{ server.name | shorten:5}}</strong> | {{ server.instanceType | uppercase }} | {{ server.started | date:'fullDate' | uppercase }} </li> </ul> </div> </div> </div>
References
https://angular.io/guide/pipes#custom-pipes