Building A Short-Description Pipe Angular 2

Pipe is same thing that filter in angluar1. Lets take a look on code that checks if field has too much characters and if it has - replaces the extra characters with ... :

import { Pipe } from '@angular/core';

@Pipe({
  name: 'short_description'
})
export class ShortDescriptionPipe {
  transform(value) {
    let transformedValue;
    if (value && value.length > 100) {
      transformedValue = `${value.substring(0, 100)}...`;
    } else {
      transformedValue = value;
    }

    return transformedValue;
  }

Now if we have some field contain more than 100 characters it will display only first 100 characters

    <div>
      <h2>Hello {{name | short_description }}</h2>      
    </div>

Extending The Pipe To Get "Maximum Chars" Param

In previous code the characters length is statically restricted to 100 chars. But what if we wish to dynamicaaly pass the maximum chars number?

    <div>
      <h2>Hello {{name | short_description : 4}}</h2>      
    </div>

As in angular1 the pipe params prefixed with ::

import { Pipe } from '@angular/core';

@Pipe({
  name: 'short_description'
})
export class ShortDescriptionPipe {
  transform(value, args?) {//args contains param
    if(!args ){
      args= 100;
    }
    let transformedValue;
    if (value && value.length > args) {
      transformedValue = `${value.substring(0, args)}...`;
    } else {
      transformedValue = value;
    }

    return transformedValue;
  }