Application wide Pipes (on beta 0.8 and up)

I create a Pipe to do the translation until the angular-translate make it to ionic2.
I want this Pipe to be globally accessible from all other pages(components)

I followed the instruction in this post

But with the upgrade to beta .8 (now I have beta .9)
https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#steps-to-upgrade-to-beta-8

The @App is replaced with @Component and the solution described in first post is not applicable.

`
///
import {Component} from ‘@angular/core’;
import {provide, PLATFORM_DIRECTIVES} from ‘@angular/core’;
import {Platform, ionicBootstrap} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {LangBundle} from ‘./ts/langBundle’;
import {eigonic} from ‘./ts/eigonic-translator’;

@Component({
template: ‘<ion-nav [root]=“rootPage”>’,
providers: [AppServices.SharingService, AppServices.StoringService, provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })],
pipes: [eigonic.Translator]
})
export class MyApp {

private rootPage: any;

constructor(private platform: Platform) {
this.rootPage = TabsPage;

platform.ready().then(() => { 
  StatusBar.styleDefault();
  eigonic.Translator.init(LangBundle.MSG, 'ar');
});

}
}

ionicBootstrap(MyApp)

`

Now that the @App decorator is gone, you need to put it in the bootstrapping function like you would with an Angular 2 app.

Hi @luchillo17
Thanks for the reply

can you share code snippet?

Sure thing, please notice that app wide service are put in the providers array as is, but app wide components needs to be provided to the PLATFORM_DIRECTIVES array before it can be passed to the providers array.

import {
  Component,
  provide,
  PLATFORM_DIRECTIVES,
  ViewChild,
  enableProdMode
} from '@angular/core'
import {ionicBootstrap, Platform, Nav} from 'ionic-angular'

import {
  Config,
  DB,
  MasterService,
  CustomerService,
  WalletService,
  NotificationService
} from './services/services'
import {BusyComponent, BusyCtrl, SyncCtrl, NotificatorComponent} from './components/components'

@Component({
  templateUrl: 'build/app.html'
})
class MyApp { ... }
ionicBootstrap(MyApp,
  [
    Config,
    DB,
    MasterService,
    CustomerService,
    WalletService,
    BusyCtrl,
    SyncCtrl,
    NotificationService,
    provide(PLATFORM_DIRECTIVES, {useValue: [BusyComponent, NotificatorComponent], multi: true})
  ])

Lastly anyone knows which is the best blogging site for making written tutorials? i want to make one about Ionic 2 Database versioning.

Thanks for the reply, Still not working for me. Here is app.ts

import {Component} from ‘@angular/core’;
import {provide, PLATFORM_DIRECTIVES} from ‘@angular/core’;
import {Platform, ionicBootstrap} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {AppServices} from ‘./ts/appServices’;
import {AppCore} from ‘./ts/core’;
import {Common} from ‘./ts/common’;
import {LangBundle} from ‘./ts/langBundle’;
import {eigonic} from ‘./ts/eigonic-translator’;

@Component({
template: ‘<ion-nav [root]=“rootPage”>’,
providers: [AppServices.SharingService, AppServices.StoringService],
pipes: [eigonic.Translator]
})
export class MyApp {
}

ionicBootstrap(MyApp, [provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })])

First, app wide pipes also have to be used in the ionicBootstrap method.
Second, is eigonic a class? why using eigonic.Translator?, does that returns a directive, injectable or what?

Hi Carl,
Thanks for the reply.

“eigonic” is module and “Translator” is a class

import {Pipe} from ‘@angular/core’;

export module eigonic {

@Pipe({ name: 'translate' })
export class Translator {
}

},

Can help more if you show the error log.

I TOLD you, the component decorator doesn’t accept the providers array for app wide pipes, you have to put the app wide pipes & providers in the ionicBootstrap providers like:

import {Component} from '@angular/core';
import {provide, PLATFORM_DIRECTIVES} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {AppServices} from './ts/appServices';
import {AppCore} from './ts/core';
import {Common} from './ts/common';
import {LangBundle} from './ts/langBundle';
import {eigonic} from './ts/eigonic-translator';

@Component({
    template: ''
})
export class MyApp { ... }

ionicBootstrap(MyApp, [
    AppServices.SharingService, 
    AppServices.StoringService, 
    provide(PLATFORM_DIRECTIVES, { useValue: [eigonic.Translator], multi: true })
])

And for gods sake search how markdown format code, the lack of colors in your code makes it harder to read.