ABOUT ME
  • Name: Tamer Durgun
  • Age: 31
  • Tall: 185cm
  • Weight: 115kg
  • From: Turkey
  • Title: Full-Stack Developer
  • Experience: 5 years
  • Grade: Bechelor's
SKILLS
  • A. Front-end Development
  • - HTML5 & CSS3
  • - Bootstrap
  • - Sass / Less
  • - javaScript
  • - ES6
  • - TypeScript
  • - Design Patterns
  • - jQuery
  • - Angular
  • - Reactjs
  • - Gruntjs / Gulpjs
  • - Webpack
  • B. Back-end Development
  • - Php
  • - Php Design Patterns
  • - OOP
  • - MySQL
  • - CodeIgniter FW
  • - Zend FW
  • - Node.js
  • C. Mobile App. Development
  • - Ionic FW
  • - React Native
BLOG
Angular 5 Create New Pipe

Hi there friends, let me show you an example of how to create new pipes (Filters) in Angular. 

In this example we create a new pipe which removes last desired number of characters from a string.

1.) run angular-cli command to create a new pipe:

ng g pipe common/pipes/removeLastChars --skip-import

2.) Register this new pipe to AppModule.

3.) Codes:


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

@Pipe({
name: 'removeLastChars'
})
export class RemoveLastCharsPipe implements PipeTransform {

transform(value: any, args?: any): any {
let removed = value.substr(0, value.length - args);
return removed;
}

}

Value parameter references the value to be filtered,

args parameter references the character number to be removed.

HTML:

{{valueToBeFiltered | removeLastChars:'3'}}

That's all, have nice coding :)

Devamı