petric petric - 2 months ago 39
TypeScript Question

angular2 rc6 custom global pipes; PLATFORM_PIPES

I am using angular with version 2.0.0-rc.6 in older versions there was a possibility to create a global pipe and register it like is shown here and in many other locations online.

I am trying to do something similar in my app but there is a problem I encountered,
I can't import PLATFORM_PIPES from angular/core and I also read that it is deprecated on the documentation and other places on line.

I found this Q&A on the matter, but it did not help me since I am using @NgModule and I can't seem to find a way to put the pipe in it in any way.

Any ideas?

Answer

Working Demo of Default-Pipe & Custom-Pipe:

https://plnkr.co/edit/BmZrCbl0czJwnPMf0x0V?p=preview


Default pipe

You don't need to do anything for this.

Since PLATFORM_PIPES has been deprecated, in RC6, default pipes are available by default.

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

@Component({
  selector: 'my-app',
  template: `  {{mydate | date:"MM/dd/yy"}}`
})
export class AppComponent {
   mydate = Date.now();
}

Custom pipe

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

@Pipe({ name: 'awesome' })

export class AwesomePipe implements PipeTransform {
  transform(phrase: string) {
    return phrase ? 'Awesome ' + phrase : '';
  }
}

I want to use it in AppComponent

 @NgModule({
   imports:      [ BroswerModule, FormsModule ],
   declarations: [ AppComponent, AwesomePipe ],  //<----added here
   exports:      [ AppComponent],
   providers:    [ ]
  })

.html

 {{ your data/value | awesome }}
Comments